如何在D3.js中指定树的最后一个元素的标签名称？

Question

我正在使用 D3.js 并尝试以带有节点的树的形式显示一些数据。

这些标签对于根和第一层子层效果很好。但是最后一层子级包含数据，其中每个数据都是单个对象，我想在该对象中显示国家/地区名称。

数据最初采用数组的形式，因此我对它们进行过滤以形成在 D3.js 中可视化所需的结构。agroforestry存储用于进行可视化的数据。

  const agroforestry = {

    name: "Intiative 2020",

    children: [

      {

        name: "Agroforestry",

        children: [],

      },

      {

        name: "No Agroforestry",

        children: [],

      },

    ],

  };

  data.forEach((d) =>

    d.agroforestry === 1

      ? agroforestry.children[0].children.push(d)

      : agroforestry.children[1].children.push(d)

  );

内部对象示例agroforestry.children[1].children：

  const example = {

    agroforestry: 0,

    avoided_degradation_and_deforestation: 1,

    country: "Chile",

    descriptions:

      "In Chile's Patagonia region, grasslands were severely degraded after years of uncontrolled sheep and cattle grazing",

    funding: 0,

    geolocation: "(-31.7613365, -71.3187697)",

    investment_type: "Private",

    latitude: -31.7613365,

    locations: "Patagonia",

    longitude: -71.3187697,

    low_carbon_agriculture: 0,

    partner_organization: "[]",

    partner_organization_urls: "[]",

    reforestation: 0,

    silvopasture: 0,

    sustainably_managed_grasslands: 1,

    titles: "Ecological restoration chacabuco valley",

    urls:

      "https://initiative20x20.org/restoration-projects/ecological-restoration-chacabuco-valley",

  };

父级的标签可见，并将.text((node) => node.data.name)其设置为标签。

    svg

      .selectAll(".label")

      .data(root.descendants())

      .join("text")

      .attr("class", "label")

      .text((node) => node.data.name)

      .attr("text-anchor", "middle")

      .attr("font-size", 14)

      .attr("x", (node) => node.y)

      .attr("y", (node) => node.x - 10);

当我选择 Country 时，父级标签不可见，但国家/地区标签可见（需要编辑样式，但它有效）.text((node) => node.data.country)。

    svg
      .selectAll(".label")
      .data(root.descendants())
      .join("text")
      .attr("class", "label")
      .text((node) => node.data.country)
      .attr("text-anchor", "middle")
      .attr("font-size", 14)
      .attr("x", (node) => node.y)

Answer 1

有两种互斥的情况：该节点有子节点吗？=>data.name否则，该节点是叶节点=>data.country所以真正的问题是我们如何检查当前节点是（不是）叶节点？为此，我们可以在节点上使用 d3-hierarchy 提供的方法。（也可以查看那里的好例子。）其中一个例子向我们展示了该node.children属性。如果已设置，则该节点有子节点（因此它不是叶节点），我们可以在自己的代码中像这样使用它：svg                       // node          // leaf   .text((node) => node.children ? node.data.name : node.data.country)