Question

我一直在尝试遵循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; });

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

请记住将xlmns引用添加到html标记：

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

树形图布局中的超链接

1 个答案: