d3.js - Hyperlinks in Treemap Layout -
i have been trying follow guidelines on hyperlinks in d3.js objects: indented tree, original scripts 2 layouts different cannot wrap head around it..
i need simple thing: attach links each node in treemap layout
i tried adding
d3.json("my_json.json", function(error, root) { var node = div.datum(root).selectall(".node") .data(treemap.nodes) .enter().append("div") .attr("class", "node") .call(position) .style("background", function(d) { return d.children ? color(d.name) : null; }) .text(function(d) { return d.children ? null : d.name; }); node.append('a') .attr("xlink:href", function(d){return d.url;}) }); but not work.. can please me out it?
update: tried switching a , div elements, still no clickable objects.
var node = div.datum(root).selectall(".node") .data(treemap.nodes) .enter() .append('a') .attr("xlink:href", function(d){return d.url;}) .append("div").attr("class", "node") .call(position) .style("background", function(d) { return d.children ? color(d.name) : null; }) .text(function(d) { return d.children ? null : d.name; });
i didn't quite try code, worked me:
// setup canvas var width = 800, height = 500; var canvas = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); // retreive json , construct treemap d3.json("http://localhost/treemap/basic.json", function (data) { // create treemap object var treemap = d3.layout.treemap() .size([width, height]) .nodes(data); console.log(treemap); // create cells var cells = canvas.selectall(".cell") .data(treemap) .enter() .append("g") .attr("class", "cell"); // create cells dimensions cells.append("rect") .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }) .attr("width", function (d) { return d.dx; }) .attr("height", function (d) { return d.dy; }); // cell labels cells.append("svg:a") .attr("xlink:href", d.url) .append("text") .attr("x", function (d) { return d.x + 10; }) .attr("y", function (d) { return d.y + 25; }) .text(function (d) { return d.children ? null : d.name; }); }); remember add xlmns reference html tag:
<html xmlns="http://www.w3.org/1999/xhtml">