D3js將路徑`d`屬性綁定到數據

Question

我試圖找到正確的方式來動態生成路徑。我正在關注使用D3js創建SVG路徑的DashingD3js' pattern。

我的問題是，除了檢查訪問器函數中的每個索引和操作值，並且除了創建表示要操縱的特定點的變量之外，是否有更簡單的方法來指定動態線座標？

我有我的對象數組中的路徑的座標。我很容易使用w和h值使座標響應。

var lineData = [ {'x': 100, 'y': 0 }, {'x': w/2, 'y': -150 }, {'x': w/2, 'y': 150}, {'x': 100, 'y': 0}]; 

我已經能夠通過訪問函數像下面那樣操縱座標了。

var lineFunction = d3.svg.line() 
     .x(function(d, i) { 

      // function replacing lineData w/dynamic data 

      } 
      return d.x 
     }) 
     .y(function(d) { return d.y }) 
     .interpolate('linear'); 

以下是我引用的路徑：

myPath 
    .attr('d', function() { return lineFunction(lineData); }); 

是否有指定的動態座標線更簡單的方法？

Answer 1

如果linedata數組中的某些值是動態的，那麼它們的值應該反映該值。

例如...

function f() {return w/2;}; //assuming w is updated asynchronously 
var lineData = [ {'x': 100, 'y': 0 }, {'x': f, 'y': -150 }, {'x': f, 'y': 150}, {'x': 100, 'y': 0}]; 

然後你只需要進行存取意識到，某些值是函數...

var lineFunction = d3.svg.line() 
.x(function(d, i) { 
    return typeof d.x === "function" ? d.x() : d.x; 
    }) 
.y(function(d) { return d.y }) 
.interpolate('linear');