Question

我正在尝试在标签中添加一个类，在我的力图中单击了该类。为此，我使用“单击”功能，将单击的项目交给更新功能（它更新项目的类）。我尝试使用 this 但是控制台将报告“ nodeClicked.childNodes [1] .classed不是函数”。

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

节点是＆lt; 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：＆lt; text＆gt;”

Answer 1

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

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

OR

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

工作代码段

＆＃13;

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
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

D3确实没有正确地解决正确的元素（组元素的文本），无论我使用哪种可能的方法（jQuery以某种方式也失败了）。我必须保持监督一些非常重要的事情，尽管我已经检查了5次。

无论如何，我找到了一个有效的解决方案：通过使用纯javascript来解决DOM元素。我用来解决这个问题并正确应用类的命令是

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

这会将类greenNode添加到group元素中。在我的CSS文件中，我编写了 .nodeClicked text 并输入了必要的CSS。因此，如果您曾经遇到过解决正确元素的问题，您也可以尝试使用此方法。

d3更改单击节点文本的类别

2 个答案: