我正在尝试找到动态生成路径的正确方法。我正在关注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); });
是否有更简单的方法来指定动态线坐标?
最佳答案
如果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');
关于javascript - D3js 将路径 `d` 属性绑定(bind)到数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30957356/