Question

我需要从值函数中访问数据的父数组。有没有办法在不使用范围更高级别的变量的情况下做到这一点？

换句话说，

var data = ["a", "b", "c"],
    svg = d3.select("svg");

svg.selectAll("rect").data(data).enter().append("rect")
    .attr("x", function(d, i) {

        // how do I access `d's` parent array from here
        // without using the closure variable `data`?

    });

编辑：

我正在避免关闭，因为我的真实世界情况更复杂，在我的情况下创建这种类型的闭包很尴尬。

Answer 1

有几种方法可以做到这一点（虽然我认为闭包是最简单的选择）。

一种方法是在当前选择上调用.data()：

var rect = svg.selectAll("rect")
    .data(data);

rect.enter().append("rect")
    .attr("x", function(d, i) {
        console.log(rect.data());
    });

在这种情况下，您需要一个变量来引用。另一种方法是通过.call运行它，它将当前选择作为参数：

svg.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .call(function(selection) {
        // get the data into your scope
        var dataArray = selection.data();
        // do more stuff with the selection
        selection
            .attr("x", function(d, i) {
                console.log(data);
            });
    });

Answer 2

您可以在元素的属性方法中执行相同的选择，并映射选区中的每个元素以检索__data__属性：

svg.selectAll('rect')
    .data(data)
    .enter()
    .append("rect")
    .attr('x', function(d, i) {
        // Select the parent, retrive the 'rect' items and get the __data__ of
        // each one
        var parent = d3.select(d3.select(this).node().parentNode),
        items = parent.selectAll('rect')[0],
        parentData = items.map(function(r) { return r.__data__; });
        console.log(parentData);
        return i * 20;
    });

我宁愿使用svg变量，但它可以做你想要的。您可以在docs中找到有关属性__data__的更多信息。

如何从值函数中访问数据的父数组？

2 个答案: