d3.svg.diagonal()如何读取绑定数据？
d3.svg.diagonal()如何读取绑定数据？
提问于 2015-07-23 21:41:21
我现在正在学习d3.js，当我学习几个教程时，我发现我真的很困惑像d3.svg.diagonal()这样的命令如何能够访问绑定数据。举下面的例子：
var canvas = d3.select('body').append('svg')
.attr('width', 500)
.attr('height', 500)
.append('g')
.attr('transform', 'translate(50,50)');
var tree = d3.layout.tree()
.size([400,400]);
var data = {
'name':'Max',
'children': [
{
'name':'Sylvia',
'children': [
{'name': 'Craig'},
{'name': 'Robin'},
{'name': 'Anna'}
]
},
{
'name': 'David',
'children': [
{'name': 'Jeff'},
{'name': 'Buffy'}
]
}
]
}
var nodes = tree.nodes(data);
var links = tree.links(nodes);
var node = canvas.selectAll('.node')
.data(nodes)
.enter()
.append('g')
.attr('class', 'node')
.attr('transform', function(d){ return 'translate(' + d.x +','+ d.y+')';});
node.append('circle')
.attr('fill', 'steelblue')
.attr('r', 5);
node.append('text')
.text(function(d) { return d.name; });
var diagonal = d3.svg.diagonal();
var link = canvas.selectAll('link')
.data(links)
.enter()
.append('path')
.attr('class', 'link')
.attr('fill', 'none')
.attr('stroke', '#ADADAD')
.attr('d', diagonal)我可以看到，'var对角线= d3.svg.diagonal()‘是一个函数，它将创建“对角线”路径，但是当我为正在创建的.link类命名的元素设置属性时，我看不到’.attr‘(“d”，对角线)；’曾经访问我用‘.data(链接)绑定的数据’。如果它实际上被调用为一个函数，并将'd‘传递给它，但就目前情况而言，我不知道对角线访问数据的位置。我不认为它与树布局有关联，因为它也从来没有传递过变量‘对角线’。谁能帮我把头绕过来吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-23 22:37:45
密码
.attr("d", diagonal)在这种情况下相当于
.attr("d", function(d, i) { return diagonal(d, i); })在第一种情况下，将函数diagonal()传递给.attr()调用。在第二种情况下，除了您传递的函数是匿名的(即它没有名称)并在其中调用diagonal()之外，还会发生相同的事情。
来自文献资料
如果值是函数，则对每个选定元素(按顺序排列)计算该函数，传递当前基准d和当前索引i，并将此上下文作为当前DOM元素。
因此，通过传递命名函数diagonal()，它自动获得绑定到所选内容中的元素的数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31598542
复制相关文章
相似问题
腾讯云开发者
