javascript - d3 更改单击的节点文本的类

Question

我正在尝试向标签添加一个类，该类在我的力图中被单击。为此，我使用“单击”函数，它将单击的项目传递给更新函数(它更新项目的类)。我尝试使用this，但控制台将报告“nodeClicked.childNodes[1].classed is not a function”。

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

节点是一个 < g> 元素，它有两个子元素:一个圆圈和文本(我想赋予 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);

但没有人采取任何行动。如果我在控制台中检查 nodeClicked 的内容是什么，它会告诉我“Array[1]”，当我打开它时:“0:”

Answer 1

您可以通过两种方式添加类。

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>