гиперссылок в макете TreeMap

Я пытался следовать инструкциям по Hyperlinks in d3.js objects: indented tree, но оригинальные сценарии для двух макетов настолько различны, что я не могу обернуть мою голову вокруг него ..гиперссылок в макете TreeMap

Мне нужна очень простая вещь: в прикрепить ссылки на каждый узел в 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;})   
    });

, но это явно не работает .. Может кто-нибудь, пожалуйста, помогите мне с этим?

UPDATE: Я попробовал переключать 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; });

источник

2015-04-09 Immiora

Nest элементы другой путь - элемент 'a' снаружи, внутри него' div'. –

Я не совсем попробовать свой код, но это работает для меня:

// 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">

источник

2015-05-03 14:29:46

гиперссылок в макете TreeMap

ответ

Смежные вопросы