使用 javascript 和 d3js 将 __data__ 从父节点分配给子节点答案

【问题标题】：Assigning __data__ from parent node to child with javascript & d3js使用 javascript 和 d3js 将 __data__ 从父节点分配给子节点
【发布时间】：2023-03-25 07:30:02
【问题描述】：

我正在为我的 d3js 图表创建一个图例 (var legend)。数据绑定到父“g”元素，特别是我需要在子“文本”元素中获取的字符串（标签）。

问题：如何将 'g' 元素中的父 data 分配给子文本元素？

代码：

var legend = svg.selectAll(".legend")
        .data(color.domain().slice().reverse()) // color is array of strings with length = 6
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });


        legend.data(headers).enter().append("text") // headers is array of strings with length = 6
              .attr("x", width - 24)
              .attr("y", 9)
              .attr("dy", ".35em")
              .style("text-anchor", "end")
              .text(function(d) { return this.parentElement.__data__; }); // not working code here

谢谢！完整代码：https://github.com/DeBraid/www.cacheflow.ca/blob/master/styles/js/d3kickchart.js

【问题讨论】：

These answers 可能会有所帮助。
一般情况下，调用.select()会继承数据，即legend.select("text").//etc。

标签： javascript arrays dom d3.js

【解决方案1】：

您的工作量比您完成所有这些手动簿记所需的工作量要大得多。将相同数据的不同表示捆绑在一起是 D3 的强项之一。通常，您希望单个数组中的所有记录尽可能非规范化，而不是尝试手动使用索引和多个列表来关联信息。

在您创建数据记录的line 21 上，只需添加一个附加属性来保存范围标签，并将这些范围用作color 轴的域。（您还可以查看 d3 的 nest 运算符...）

然后你的传奇就可以像这样简单 (jsfiddle)：

var categories = ["foo", "bar", "baz", "qux", "zoo", "yaw"];

var color = d3.scale.ordinal()
    .domain(categories)
    .range(["#98ABC5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c"]);

d3.select("#legend")
    .selectAll("div")
    .data(categories)
    .enter()
    .append("div")
    .style("background-color", color)
    .text(function(d) { return d });

【讨论】：

很好的解释和简洁的解决方案。显然我的代码需要一些重构，这篇文章解决了这个问题，谢谢！

【解决方案2】：

编辑：标记的正确答案是正确的答案。以下是我一起破解的糟糕解决方案。

在这里得到了一段相当古怪的代码，但它确实有效！ HT Lars 建议添加之前缺少的 .select()。

    legend.selectAll("text .legend")
        .data([headers.slice().reverse()]) // data takes an array (headers), wrapped in [], order reversed
        .enter().append("text")
          .attr("x", width - 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .style("text-anchor", "end")
          .text(function(d,i,j) { return d[j];  }); // ** key **

其中“j”是包含当前元素的组的索引。因此，不需要使用 this.parentNode.data 或类似的东西，因为我们可以使用上面的方法访问父 'g'。不是 100% 确定它的机制，但它确实有效！如果您有更简洁的方法，请随时详细说明此方法。

【讨论】：