javascript - D3js 将路径 `d` 属性绑定(bind)到数据

Question

我正在尝试找到动态生成路径的正确方法。我正在关注DashingD3js' pattern用于使用 D3js 创建 SVG 路径。

我的问题是，除了检查访问器函数中的每个索引并操作值之外，除了创建代表我想要操作的特定点的变量之外，是否有更简单的方法来指定动态线坐标？

我有对象数组中路径的坐标。我可以使用 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数组中的某些值是动态的，那么它们的值应该反射(reflect)这一点。

例如...

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');