树形图布局中的超链接答案

【问题标题】：Hyperlinks in Treemap Layout树形图布局中的超链接
【发布时间】：2015-05-03 22:29:46
【问题描述】：

我一直在尝试遵循 Hyperlinks in d3.js objects: indented tree 上的指导方针，但是这两种布局的原始脚本是如此不同，我无法理解它..

我需要一个非常简单的东西：将链接附加到treemap layout中的每个节点

我尝试添加

    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;})         
  });

但它显然不起作用..谁能帮我解决这个问题？

更新： 我尝试切换 a 和 div 元素，但仍然没有可点击的对象。

  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; });

【问题讨论】：

反向嵌套元素——a 元素在外面，div 在里面。

标签： d3.js

【解决方案1】：

我没有完全尝试你的代码，但这对我有用：

// Setup canvas
var width = 800, height = 500;
var canvas = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Retreive JSON and 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 all the cells
    var cells = canvas.selectAll(".cell")
        .data(treemap)
        .enter()
        .append("g")
        .attr("class", "cell");

    // Create the 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; });
});

记得在 html 标签中添加 xlmns 引用：

<html xmlns="http://www.w3.org/1999/xhtml">

【讨论】：