Skip to content

Instantly share code, notes, and snippets.

@antulik antulik/pack.js
Created Nov 17, 2012

Embed
What would you like to do?
D3 Pack with links
var width = 960,
height = 960,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([width - 4, height - 4])
.padding(10)
.value(function(d) { return d.size; });
var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "pack")
.append("g")
.attr("transform", "translate(2, 2)");
d3.json("../data/flare.json", function(json) {
var pnodes = pack.nodes(json);
var plinks = [{source: pnodes[1], target: pnodes[2]}] //pack.links([pnodes[2]]);
var node = vis.data(pnodes).selectAll("g.node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
node.append("circle")
.attr("r", function(d) { return d.r; });
node.filter(function(d) { return !d.children; }).append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.text(function(d) { return d.name.substring(0, d.r / 3); });
// vis.selectAll('line')
// .data(plinks)
// .enter()
// .append('line')
// .style("stroke", "#999")
// .style("stroke-width", 1.5)
// .attr('d', d3.svg.line());
var links = vis.selectAll("line.node")
.data(plinks)
.enter()
.append("line")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; })
.attr("class", "node")
.style("stroke", "#000")
.style("stroke-width", 10.5);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.