添加< >标记在选择的enter()部分的主数据元素之前

Adding an <a> tag before the primary data element in the enter() section of a selection

本文关键字：数据 元素 enter 选择 添加      更新时间：2023-09-26

使用d3.js，我正在使用使用enter()， exit()和默认更新选择的选择。
我选择的元素是路径元素。当我创建它们时，我想用标记包围它们。当我更新它们时，我只想更新其中的元素。

我正在尝试下面的操作，但是更新部分正在标签上执行。例:我以"display"结尾;"stroke"属性。

这个答案处理的是添加一个a标记，而不是更新混乱。

我该怎么做?

var preciseLinks = svg.selectAll("path.preciseLink")
        .data(json, function(d) { return d["r1"]["title"] + "-" + d["r1"]["loc"] + "-" + d["r2"]["title"] + "-" + d["r2"]["loc"]; });
    //enter
    preciseLinks.enter()
            .append("a").attr("href", function(d) { return "/" + replaceAll(d["r1"]["title"],"-","_") + "." + replaceAll(d["r1"]["loc"],":",".")})
            .append("path")
            .attr("class", function(d) { return "preciseLink " + d["r1"]["title"] + " " + d["r2"]["title"]; });
    //update
    preciseLinks
            .attr("display", "inline")
            .attr("stroke", function (d) { ...

您需要与您选择的基本元素保持一致。如果您希望每个数据点都有<a><path></path></a>，那么您将希望使用<a>作为选择的基础，并在更新中从那里向内选择。

var preciseLinks = svg.selectAll("a.preciseLinkA")
        .data(json, function(d) { return d["r1"]["title"] + "-" + d["r1"]["loc"] + "-" + d["r2"]["title"] + "-" + d["r2"]["loc"]; });
    //enter
    preciseLinks.enter()
            .append("a").attr("href", function(d) { return "/" + replaceAll(d["r1"]["title"],"-","_") + "." + replaceAll(d["r1"]["loc"],":",".")})
            .classed("preciseLinkA", true)
            .append("path")
            .attr("class", function(d) { return "preciseLink " + d["r1"]["title"] + " " + d["r2"]["title"]; });
    //update
    preciseLinks
            .select("path.preciseLink")
            .attr("display", "inline")
            .attr("stroke", function (d) { ...
相关文章：