无法水平绘制参考线nvd3气泡图

Question

我试图在nvd3气泡图中绘制一条水平线(供参考).我试图在svg图表上添加一行

.append('line')
    .attr({
        x1: x(0),
        y1: 10,
        x2: x(3),
        y2: 10
});

但我没有成功.这是小提琴.请注意,y1和y2值是相同的(即10),因为我试图绘制一条水平线(y=10).

Answer 1

您的代码有两个问题.

1. 你需要设置stroke你的线.试试这个:

   d3.select('#chart svg')
     .append('line')
     .attr({ x1: x(0), y1: 10, x2: x(3), y2: 10 })
     .style("stroke", "#000");
   

   这会在JSFiddle的左上角形成一条黑线.但是,您希望在图表上绘制线条y=10.这让我们看到了第二点.

2. 在此之前,您试图绘制y1=y2=10距离SVG顶部仅10个像素的线.此外,您使用自己的x比例.相反,您需要使用图表的x轴和y轴刻度来绘制图表中相应点的线条.NVD3可以访问每个轴的刻度chart.axis.scale()(参见此SO问题),因此您可以执行以下操作:

   d3.select('#chart svg')
       .append('line')
       .attr({
           x1: 75 + chart.xAxis.scale()(0),
           y1: 30 + chart.yAxis.scale()(10),
           x2: 75 + chart.xAxis.scale()(3),
           y2: 30 + chart.yAxis.scale()(10)
       })
       .style("stroke", "#000");
   

   (请注意,图表上有75像素左边距和30像素上边距,因此您需要适当调整线条的位置.)如果进行了这些更改,则会得到下图.在这里查看更新的JSFiddle .

您还可以确保使用窗口更新行更新,如下所示:

nv.utils.windowResize(function(){
    chart.update();
    line.attr({
        x1: 75 + chart.xAxis.scale()(0),
        y1: 30 + chart.yAxis.scale()(10),
        x2: 75 + chart.xAxis.scale()(3),
        y2: 30 + chart.yAxis.scale()(10)
    })

});