CODEWITHSUNDEEP
javascriptsvgchartsd3.js
Anti
Anti

Reputation: 3

Selected element won't change in d3

This snippet is a slightly modified version of the example http://bl.ocks.org/4063550 of a Reingold-Tilford Tree. Everything is similar, except I have slightly changed the code where one appends the text to a node. I want to attach an id to each node text so that I can later tweak the text a bit so the graph is more readable.

Here I add the id's and slightly tweak the rotation of the entire diagram. My changes are enclosed with the **.

node.append("text")
  .attr("dy", ".31em")
  **.attr("id", function(d,i) {return "n" + i;})**
  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  .attr("transform", function(d) { return d.x < 180 ? "**rotate(10)**translate(8)" :"**rotate(199)**translate(-8)"; })
  .text(function(d) { return d.name; });
});

Right after the example code with the above being the only changes, I want to put the following line, for example, into the same script.

d3.select("#n1").text("test");

When I load the page it's not changing the text at node id = "n1"! If I put exactly that same line into the console with Firebug, it changes the n1 node's text as desired.

After browsing countless tutorials and the like, I think that I don't understand something fundamental about how this stuff works, any advice would be appreciated!

Edit: Here is the complete html file as requested! It is verbatim the example I linked above, with the only exceptions being what I described above.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 12px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var diameter = 960;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 120])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("thesis.json", function(error, root) {
  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
  .data(links)
.enter().append("path")
  .attr("class", "link")
  .attr("d", diagonal);

  var node = svg.selectAll(".node")
  .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dy", ".25em")
      .attr("id", function(d,i) {return "n" + i;})
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "rotate(10)translate(8)" : "rotate(199)translate(-8)"; })
      .text(function(d) { return d.name; });
});

d3.select(self.frameElement).style("height", diameter  + "px");

d3.select("#n1").text("test");

</script>

</body>
</html>

Upvotes: 0

Views: 951

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

The issue is that d3.json makes an asynchronous call. That is, the code within that block is only executed when the network call returns with the JSON data. The code after the block is executed immediately though. So, you are trying to modify an element that does not exist yet.

The solution is to move the code that modifies the graph inside the d3.json block, or into a function that is called inside that block.

Upvotes: 1

Related Questions