d3複数折れ線グラフがあふれています

Question

私はこのようなデータセットを持っています。日付は手作業の前に "日付"タイプのオブジェクトとして準備されています。

  // 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"); 

Iはクロムでデバッグする場合、私はminXAxis値が最小の日付で確認し得る：私は、具体的に以下のようにコードを使用して、私のXの範囲と軸を決定するためにそれを使用

$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" 
... 
} 
] 

時間。たとえば、12月初めの月単位のチャートでは、軸の最初のエントリは次のものになります。ビジュアル上の軸は常にシフトされ、グラフにフィットしません。私はここで何が欠けていますか？私はオフセットを追加すべきだと考えましたが、なぜオーバーフローしますか？

ありがとうございます！

Answer 1

私があると仮定している、あなたが描画領域を変換する方法は明らかではないが、代わりに0

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

の左マージンから開始するxスケールの範囲を変更するようにしてくださいg変数にも軸を追加します。