无法水平绘制参考线 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)
    })

});