nvd3 multiBarChart x軸に沿った線

Question

複数の値を持つ線をmultiBarChartのx軸に沿って追加する必要があります。私はスイッチを切り替えると、既存の機能が壊れているため、multiChartやlinePlusBarChartなどの別のnvd3コントロールを使用することはできません。

次のコードとフィドルは、私が今までに持っているものを示しています。

var limits = [[60,166990904656],[300,154990904656],[500,142990904656]]; 

var lineFunction = d3.svg.line() 
    .x(function(d) { return d[0] }) 
    .y(function(d) { 
    d = d[1]/1000000000; 
    return d  
}).interpolate('step-after'); 

//The line SVG Path we draw 
d3.select("#chart svg") 
    .append("path") 
    .attr("d", lineFunction(limits)) 
    .attr("stroke", "red") 
    .attr("stroke-width", 1) 
    .attr("fill", "none"); 

https://jsfiddle.net/s2vemzht/11/

は私が3つの問題に直面しています：まずラインのx軸の配置です。現時点では、次のバーの開始位置に基づいて動的に配置する方法がわからないため、この値をlimits配列にハードコードしています。

第2の問題は、データ配列内の他の値に関連する制限値です。それは正確に配置されていないようです。

3番目の問題は、limits配列に3つの値があっても、3番目のバーを描画しない行です。私は補間プロパティを変更しようとしましたが、それはまだ問題です。

私はyとx軸に基づいて特定のポイントとポジショニングでバーの上に線を引くことにより、それを把握するために管理

Answer 1

:-)すべての質問に対して謝罪が

をスケールので、私はD3と初心者です

  var yValueScale = chart.yAxis.scale(), 
       yValue = 0, 
       xValueScale = chart.xAxis.scale(), 
       g = d3.select("#chart svg .nvd3"); 

     for(var i=0;i<limits.length;i++){ 
     g.append("line") 
      .attr("class","limit-line") 
      .attr("x1", xValueScale(d3.time.format('%b-%d')(new Date(limits[i][0])))) 
      .attr("y1", yValueScale(limits[i][1]/ 1000000000)) 
      .attr("x2", xValueScale(d3.time.format('%b-%d')(new Date(limits[i][0]))) + parseInt(d3.select("#chart svg .nv-bar").attr("width"))) 
      .attr("y2", yValueScale(limits[i][1]/ 1000000000)) 
      ;  
     } 

https://jsfiddle.net/s2vemzht/25/