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

Question

我正在尝试在nvd3气泡图中绘制一条水平线（供参考）。我试图在svg图表中添加一行

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

但是没有成功。 Here是小提琴。请注意，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. 之前，您试图在距离SVG顶部仅10个像素的y1=y2=10处绘制线条。此外，您使用的是自己的x比例。相反，您需要使用图表的x轴和y轴刻度来绘制图表中相应点的线条。 NVD3可以通过chart.axis.scale()访问每个轴的比例（请参阅this SO question），因此您可以执行以下操作：

   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 here。

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

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)
    })

});