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

});