D3.js 无法水平绘制参考线nvd3气泡图_D3.js_Nvd3.js_Bubble Chart

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

d3.js

D3.js 无法水平绘制参考线nvd3气泡图,d3.js,nvd3.js,bubble-chart,D3.js,Nvd3.js,Bubble Chart,我试图在nvd3气泡图中画一条水平线（供参考）。我试图在svg图表中添加一行 .append('line') .attr({ x1: x(0), y1: 10, x2: x(3), y2: 10 }); 但我并不成功。这是小提琴。请注意，y1和y2的值是相同的（即10），因为我试图画一条水平线（y=10）。您的代码有两个问题您需要设置行的笔划。试试这个： d3.select('#chart svg') .append

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

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

但我并不成功。这是小提琴。请注意，

y1

和

y2

的值是相同的（即10），因为我试图画一条水平线（

y=10

）。

您的代码有两个问题

您需要设置行的

笔划

。试试这个：

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

这将在JSFIDLE的左上角形成一条黑线。但是，您希望在图表上画一条线，其中

y=10

。这就引出了第二点

之前，您试图在距离SVG顶部仅10个像素的

y1=y2=10

处画一条线。此外，您还使用了自己的

量表。相反，您需要使用图表的x轴和y轴比例在图表中的相应点绘制直线。NVD3的每个轴的刻度都可以通过

chart.axis.scale（）

（请参阅）访问，因此您可以执行以下操作：

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像素的上边距，因此您需要适当调整线条的位置。）如果进行这些更改，您将看到下图。请参阅更新的JSFIDLE。

您还可以确保您的行更新为窗口大小，如下所示：

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

});