D3更改所单击节点文本的类

d3 change class of clicked node text

本文关键字：文本 节点 单击 D3      更新时间：2023-09-26

我试图添加一个类的标签，这是点击在我的力图。为此，我使用了一个"click"函数，它将被单击的项传递给更新函数(它更新该项的类)。我尝试使用这个，但是控制台会报告" nodeclick . childnodes[1]。Classed不是一个函数"。

然后我用谷歌搜索并尝试使用"d3.select(this).select("text");"，它不报告错误，也不更新文本。

节点是元素，它有两个子元素:圆圈和文本(文本我想给一个css类)

如果你愿意，你可以看看我的代码片段:

// Toggle children on click.
// Also save information about what was clicked and update the GUI
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    }
    else{
        d.children = d._children;
        d._children = null;
    }
    // Save which node was just clicked now
    nodeClicked = d3.select(this).select("text");
    // Save the d3 data of this node
    nodeClickedData = d;
}

要更改类，我测试了两个:

$(nodeClicked).addClass("nodeGreenMarked");

: 

nodeClicked.classed("nodeBlueMarked", true);

但是没有人做任何事情。如果我在控制台检查nodeclick的内容是什么，它告诉我"Array[1]"，当我打开它时:"0:<文本> "

可以通过两种方式添加class: 

d3.select(this).select("text").attr("class",className);

或

d3.select(this).select("text").classed(className,true);

工作片段:

d3.selectAll(".node").on("click", function() {
  //check if node is already selected
  var text = d3.select(this).select("text");
  if (text.classed("selectedText")) {
    text.classed("selectedText", false);
    //Remove class selectedNode
  } else {
    text.classed("selectedText", true);    
    //Adds class selectedNode
  }
});
.node {
  cursor: pointer;
}
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}
.node text {
  font: 12px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}
.selectedText {
  fill: red;
}
<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="960" height="500">
  <g transform="translate(120,20)">
    <path class="link" d="M0,262.85714285714283C90,262.85714285714283 90,197.1428571428571 180,197.1428571428571"></path>
    <path class="link" d="M0,262.85714285714283C90,262.85714285714283 90,328.57142857142856 180,328.57142857142856"></path>
    <path class="link" d="M180,197.1428571428571C270,197.1428571428571 270,131.42857142857142 360,131.42857142857142"></path>
    <path class="link" d="M180,197.1428571428571C270,197.1428571428571 270,262.85714285714283 360,262.85714285714283"></path>
    <g class="node" transform="translate(180,328.5714416503906)">
      <circle r="10" style="fill: rgb(255, 255, 255);"></circle>
      <text x="13" dy=".35em" text-anchor="start" style="fill-opacity: 1;">Level 2: B</text>
    </g>
    <g class="node" transform="translate(180,197.14285278320312)">
      <circle r="10" style="fill: rgb(255, 255, 255);"></circle>
      <text x="-13" dy=".35em" text-anchor="end" style="fill-opacity: 1;">Level 2: A</text>
    </g>
    <g class="node" transform="translate(0,262.8571472167969)">
      <circle r="10" style="fill: rgb(255, 255, 255);"></circle>
      <text x="-13" dy=".35em" text-anchor="end" style="fill-opacity: 1;">Top Level</text>
    </g>
    <g class="node" transform="translate(360,262.8571472167969)">
      <circle r="10" style="fill: rgb(255, 255, 255);"></circle>
      <text x="13" dy=".35em" text-anchor="start" style="fill-opacity: 1;">Daughter of A</text>
    </g>
    <g class="node" transform="translate(360,131.42857360839844)">
      <circle r="10" style="fill: rgb(255, 255, 255);"></circle>
      <text x="13" dy=".35em" text-anchor="start" style="fill-opacity: 1;">Son of A</text>
    </g>
  </g>
</svg>

D3不知何故没有正确地处理正确的元素(group元素的文本)，无论我使用哪种可能的方法(jQuery不知何故也失败了)。我一定是在监督一些非常重要的事情，尽管我每件事都检查了大约5次。

不管怎样，我找到了一个可行的解决方案:用纯javascript处理DOM元素。我用来解决这个问题并正确应用类的命令是

nodeClicked = this;
...
nodeClicked.classList.add("greenNode");

这将类greenNode添加到group元素中。在我的CSS文件中，我写了。nodeclick text并放入所需的CSS。因此，如果您在处理正确的元素时遇到问题，您也可以尝试使用此方法。

相关文章：