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数组中的某些值是动态的，那么它们的值应该反映出来。

例如......

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

D3js将路径`d`属性绑定到数据

1 个答案: