Question

我正在学习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 diagonal = d3.svg.diagonal（）'这一行是一个创建“对角线”路径的函数，但是当我为我创建的.link类命名元素设置属性时，我看不出'.attr（“d”，对角线）;'永远可以访问我用'.data（链接）'绑定的数据。也许如果它实际上被称为一个函数并且传递给它'd'，但是就目前而言，我看不到对角线可以访问数据的位置。我不认为它与树布局有关，因为它永远不会传递变量'diagonal'。有人可以帮助我解决这个问题吗？

Answer 1

代码

.attr("d", diagonal)

在这种情况下，

相当于

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

您在第一种情况下将功能diagonal()传递给.attr()来电。在第二种情况下，除了您传递的函数是匿名的（即它没有名称）并在其中调用diagonal()之外，会发生同样的事情。

来自the documentation：

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

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

d3.svg.diagonal（）如何读取绑定数据？

1 个答案: