d3多線圖溢出

Question

我有一組這樣的數據。該日期在手之前預先作爲「日期」類型對象。

$scope.graphedPlans = [ 
{key: "planProvider1" 
    values: [ 
     { 
     Date: Wed Nov 19 2014 00:00:00 GMT-0600 (Central Standard Time), 
     Cost: 141.56 
     }, 
     { 
     Date: Mon Dec 22 2014 00:00:00 GMT-0600 (Central Standard Time, 
     Cost: 50.60 
     } 
    ] 
}, 
{ key: "planProvider2" 
... 
} 
] 

我用它來確定我的X系列和軸，具體使用如下代碼：

  // Chart Values 
      var xAxis, yAxis; 
      var minXaxis = 0, minYAxis = 0, maxXAxis = 0, maxYAxis = 0; 
      var x = d3.scaleTime().range([0, width]), 
       y = d3.scaleLinear().range([height, 0]), 
       z = d3.scaleOrdinal(blueScale); 
      var svg = d3.select("#planLineChart"), 
       margin = { top: 20, right: 50, bottom: 20, left: 50 }, 
       width = svg.attr("width") - margin.left - margin.right, 
       height = svg.attr("height") - margin.top - margin.bottom, 

     minXaxis = d3.min($scope.graphedPlans, function (c) { return d3.min(c.values, function (d) { return d.Date; }) }); 
       minYAxis = d3.min($scope.graphedPlans, function (c) { return d3.min(c.values, function (d) { return d.Cost; }) }); 
       maxXAxis = d3.max($scope.graphedPlans, function (c) { return d3.max(c.values, function (d) { return d.Date; }); }); 
       maxYAxis = d3.max($scope.graphedPlans, function (c) { return d3.max(c.values, function (d) { return d.Cost; }); }); 

       // Scale and Range setup 
       x.domain([minXaxis, maxXAxis]); 
       y.domain([minYAxis, maxYAxis]); 
       z.domain($scope.graphedPlans.map(function (c) { return c.key; })); 

       xAxis = d3.axisBottom(x); 
       yAxis = d3.axisLeft(y); 
      // Attach Axis x & y to graph 
       g.append("g") 
        .attr("class", "axis axis--x") 
        .attr("transform", "translate(0," + height + ")") 
        .attr('stroke', 'black') 
        .call(xAxis); 

       g.append("g") 
        .attr("class", "axis axis--y") 
        .call(yAxis) 
        .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 0) 
        .attr('stroke', 'black') 
        .attr("dy", "0.71em") 
        .attr("fill", "#000") 
        .style("text-anchor", "end"); 

當我在Chrome調試，我得到一個確認，該minXAxis值是最小的日期時間。例如，十二月初在每月的圖表上，但軸線內的第一個條目將是下一個。視覺上的軸始終移動並且不適合圖表。我在這裏錯過了什麼？我認爲我應該添加一個偏移量，但爲什麼會溢出？

謝謝！

Answer 1

嘗試改變X量程範圍從左邊距您如何轉化繪圖區域，我以爲是開始而不是0

var x = d3.scaleTime().range([margin.left, width]) 

雖然目前尚不清楚g變量，您也將軸附加到。