D3舉動圈

Question

我有以下plunkr：http://plnkr.co/edit/FLSz6swyiDuNchTYo2Xf?p=preview

的plunkr裏面你會看到，我試圖建立與1+路徑/線路圖我正在移動一些鼠標移動的圓形元素。爲了適應X軸和Y軸，我需要一些餘量。當我翻譯X上的路徑/線時，爲X軸騰出空間，沿路徑/線移動的圓不再遵循正確的路徑。

的線直接加入svg元素和它們的定義是這樣的：

var line = d3.svg.line() 
     .x(function (d, i) { 
      //return margin.left + xScale(i); 
      return xScale(i); 
     }) 
     .y(function (d) { 
      return margin.top + yScale(d); 
//       return yScale(d); 
     }) 
     .interpolate("cardinal"); 

沒有任何人有一個想法，爲什麼？

Answer 1

而不是

var lines = svg.selectAll(".gLine") 
    ... 

要行添加到轉換創建的組和（正確）

：

var lines = lineGroup.selectAll(".gLine") 

同樣，您需要將循環往復到翻譯組：

var circles = lineGroup.selectAll("circle") 

這個「重用」lineGroup，這很好，或者你可以創建一個「circleGroup」如果你願意。

這將修復表示，但捕獲的鼠標座標仍然會被抵消。要解決這個問題的方法之一是調整捕獲鼠標位置的x：

mouseUnderlay.on("mousemove", function() { 
    var x = d3.mouse(this)[0] - margin.left; 

Here it is working