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

Question

我现在正在学习 d3.js，当我浏览一些教程时，我发现我真的很困惑 d3.svg.diagonal() 这样的命令如何访问绑定(bind)数据。以下面的例子为例:

 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对 Angular 线 = d3.svg.diagonal()”是一个将创建“对 Angular 线”路径的函数，但是当我为正在创建的 .link 类命名元素设置属性时，我不明白'.attr("d",对 Angular 线);'如何曾经可以访问我用“.data(links)”绑定(bind)的数据。也许如果它实际上被调用为一个传递给它的“d”函数，但就目前情况而言，我看不到对 Angular 线在哪里可以访问数据。我不认为它与树布局有关，因为它也从未传递变量“对 Angular 线”。有人可以帮我解决这个问题吗？

Answer 1

代码

.attr("d", diagonal)

在这种情况下相当于

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

在第一种情况下，您将函数 diagonal() 传递给 .attr() 调用。在第二种情况下，会发生同样的事情，只不过您传递的函数是匿名的(即它没有名称)并在内部调用 diagonal() 。

来自the documentation :

[I]f value is a function, then the function is evaluated for each selected element (in order), being passed the current datum d and the current index i, with the this context as the current DOM element.

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