Question

我需要在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个值，线也不会覆盖第3个柱。我尝试更改插值属性但它仍然是一个问题。

我是D3的初学者，所以对所有问题道歉： - ）

Answer 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/

nvd3 multiBarChart，沿x轴线

1 个答案: