javascript - d3.svg.diagonal()如何读取绑定(bind)数据？

我现在正在学习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)

我可以看到“ varagon = d3.svg.diagonal（）”行是一个将创建“对角线”路径的函数，但是当我为要创建的.link类名元素设置属性时，却没有看看如何'.attr（“ d”，对角线）;'曾经访问过我用'.data（links）'绑定的数据。也许实际上是将它作为传递了'd'的函数来调用的，但是就目前而言，我看不到对角线曾经访问过数据的位置。我不认为它与树的布局有关，因为它也从未传递过变量“对角线”。有人可以帮我解决这个问题吗？

最佳答案

编码

.attr("d", diagonal)

在这种情况下等于

.attr("d", function(d, i) { return diagonal(d, i); })

在第一种情况下，您要将函数diagonal()传递给.attr()调用。在第二种情况下，除了传递的函数是匿名的（即它没有名称）并在内部调用diagonal()之外，发生了相同的事情。

从the documentation：


  [I] f值是一个函数，然后为每个选定元素（按顺序）评估该函数，并传递当前数据d和当前索引i，并将此上下文作为当前DOM元素。


因此，通过传递命名函数diagonal()，它将自动获取绑定到选择中元素的数据。

关于javascript - d3.svg.diagonal()如何读取绑定(bind)数据？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31598542/