I am currently working on a data visualization project using D3.js and I started with a basic framework that I found on this link
The data for my visualization is coming from a json file containing only two values, a string value and an integer. However, I want to include another string value in the visualization below these existing values. Unfortunately, I am struggling to identify the specific changes needed in the d3 code to achieve this.
Below is the snippet of my d3 code:
d3.json("test.json", function(error, root) {
var focus = root,
nodes = pack.nodes(root);
svg.append("g").selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("r", function(d) { return (d.r); })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { return zoom(focus == d ? root : d); });
svg.append("g").selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("fill", "white")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? null : "none"; })
.text(function(d) { return d.name; });
d3.select(window)
.on("click", function() { zoom(root); });
function zoom(d, i) {
var focus0 = focus;
focus = d;
var k = innerDiameter / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
d3.event.stopPropagation();
var transition = d3.selectAll("text,circle").transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
transition.filter("circle")
.attr("r", function(d) { return k * d.r; });
transition.filter("text")
.filter(function(d) { return d.parent === focus || d.parent === focus0; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
});
d3.select(self.frameElement).style("height", outerDiameter + "px");
</script>