nvd3 multiBarChart 沿 x 轴的线答案

【问题标题】：nvd3 multiBarChart with line along x axisnvd3 multiBarChart 沿 x 轴的线
【发布时间】：2017-12-05 17:39:20
【问题描述】：

我需要沿 multiBarChart 的 x 轴添加一条具有多个值的线。如果我切换，由于现有功能中断，我无法使用其他 nvd3 控件，如 multiChart 或 linePlusBarChart。

以下代码和小提琴显示了我到目前为止所拥有的内容。

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 轴位置。目前我已将此值硬编码到限制数组中，因为我不确定如何根据下一个柱的开始位置动态定位它。

第二个问题是与数据数组中其他值相关的限制值。它似乎没有准确定位。

第三个问题是，即使限制数组中有 3 个值，线也不会绘制在第三条柱上。我尝试更改 interpolate 属性，但它仍然是一个问题。

我是 D3 的初学者，因此对所有问题表示歉意 :-)

【问题讨论】：

1)chart.height不能和height一样，否则你的x轴会被截断
感谢您的回复。 x 轴目前似乎没有被切断。
你能给出你想要的截图吗？

标签： d3.js nvd3.js

【解决方案1】：

我设法通过在特定点的条上画线并根据 y 和 x 轴刻度定位来弄清楚

          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/

【讨论】：