Implementing pack layout with D3 v4 is my current task, and I am looking to adjust the circle sizes based on the values "funds" and "spend" in my csv file.
The following code successfully scales the circles:
rank(funds)
rank(spend)
However, the on.click events are not functioning to scale the circles:
d3.select("#funds")
.on("click", function () {
return rank(funds);
});
For the code and data, here is the link to the plunker:
https://plnkr.co/edit/vp3MuQZEU85cNI1KUlc5?p=info
var diameter = 400
var color = d3.scaleOrdinal()
.range(["#ff433d", "#ff8e8b", "#ffc6c4", "#5c42ab", "#9d8ecd", "#cec6e6"])
var pack = d3.pack()
.size([diameter, diameter])
.padding(1.5)
var vis = d3.select("#svgid").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "pack")
.append("g");
//DRAW CHART
d3.csv("bil-rupeex.csv", function(data) {
var root = { name: "decade", children: data };
//UPDATE DATA
funds = d3.hierarchy(root)
.sum(function(d) { return d.funds })
spend = d3.hierarchy(root)
.sum(function(d) { return d.spend })
function rank(data) {
pack(data);
var node = vis.selectAll("circle")
.data(data.descendants())
.enter().append("circle")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("r", function(d) { return d.r; })
.attr("fill", function(d) {
return color(d.data.scam);
})
node.exit().remove();
}
rank(funds);
//BUTTONS
d3.select("#funds")
.on("click", function () {
return rank(funds);
});
d3.select("#spend")
.on("click", function () {
return rank(spend);
});
})