無法水平繪製參考線nvd3氣泡圖

Question

我想在nvd3氣泡圖中繪製水平線（僅供參考）。我試圖追加一條線到svg圖表

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

但是我沒有成功。 Here是小提琴。請注意0​​和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) 
    }) 

});