javascript - d3 change class of clicked node text - Stack Overflow

admin管理员组

文章数量:1307658

I'm trying to add a class to the label, that was clicked in my force diagram. For this I use a "click" function, which hands the clicked item to the update function (it updates the class of the item). I tried using this but then the console will report "nodeClicked.childNodes[1].classed is not a function".

Then I googled and tried to use "d3.select(this).select("text");" which does not report an error, nor update the text.

A node is a < g > Element which has two children: a circle and the text (the text I want to give a css class)

If you want to, you can look at my code snippet:

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

To change the class I tested both:

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

and:

nodeClicked.classed("nodeBlueMarked", true);

But none did anything. If I check in the console what content nodeClicked is, it tells me "Array[1]" and when I open it: "0:< text >"

I'm trying to add a class to the label, that was clicked in my force diagram. For this I use a "click" function, which hands the clicked item to the update function (it updates the class of the item). I tried using this but then the console will report "nodeClicked.childNodes[1].classed is not a function".

Then I googled and tried to use "d3.select(this).select("text");" which does not report an error, nor update the text.

A node is a < g > Element which has two children: a circle and the text (the text I want to give a css class)

If you want to, you can look at my code snippet:

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

To change the class I tested both:

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

and:

nodeClicked.classed("nodeBlueMarked", true);

But none did anything. If I check in the console what content nodeClicked is, it tells me "Array[1]" and when I open it: "0:< text >"

• javascript
• jquery
• d3.js

Share Improve this question Follow asked Nov 8, 2016 at 10:18 olop01olop01 27311 gold badge33 silver badges1818 bronze badges 2

• Can you show a sample of the svg? – StudioTime Commented Nov 8, 2016 at 10:36
• This is the one I used: bl.ocks/d3noob/8375092 Is the console output "Array" correct? If I just used "this" there was the correct svg text element there, but also the error "classed is not a function" – olop01 Commented Nov 8, 2016 at 10:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You can add class in two ways.

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

OR

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

Working Snippet:

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/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 did somehow not correctly address the correct element (the text of the group element), no matter which of the possible methods I used (jQuery did somehow also fail). I must have keeping to oversee something really important, though I checked everything like 5 times.

No matter, I found a working solution: by adressing the DOM elements with pure javascript. The mand I used to solve this and get the class applied correctly was

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

This adds the class greenNode to the group element. In my CSS file I wrote .nodeClicked text and put in the necessary CSS. So if you once also have problems addressing the correct element, you can also try to use this method.

本文标签： javascriptd3 change class of clicked node textStack Overflow