2016-05-24 5 views
3

Я искал метод удаления корневого узла из моего радиального дерева Тилфорда, но пока не повезло. Я нашел аналогичный вопрос here, но предоставленный ответ не является достаточно конкретным, чтобы полностью понять, где мне нужно использовать d.depth > 0. Я попытался добавить эту строку кода в местах, которые имели смысл, но не были успешными (например, node.append и .data (узлы)). прикрепленный фрагмент аналогичен местоположению пользователя @JSBob, ссылаясь на другой вопрос, любое направление было бы полезно, поскольку я новичок в D3!Radial Reingold Tilford Дерево удалить корневой узел

function createVisualization(root){ 
    //if (error) throw error; 
    drawLegend(); 
    var nodes = tree.nodes(root), 
     links = tree.links(nodes); 
     console.log(nodes); 

    var link = svg.selectAll(".link") 
     .data(links) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", diagonal); 

    var node = svg.selectAll(".node") 
     .data(nodes) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { 
     return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 
     .on("mouseover", mouseOverArc) 
     .on("mousemove", mouseMoveArc) 
     .on("mouseout", mouseOutArc); 

    node.append("circle").attr("r", 5) 
    .style("fill", function(d) { 
    if(d.size == 0) { 
     return "#8c6226"; //Brown 
    } else if(d.size == 1){ 
     return "#DC143C"; //Crimson 
    } else if(d.size == 2){ 
     return "#FFA500"; //Orange 
    } else if(d.size == 3){ 
     return "#32CD32"; //LimeGree 
    } else if(d.size == 4){ 
     return "#1E90FF"; //DodgerBlue 
    } 
    ;}) 

ответ

0

Использование:

var link = svg.selectAll(".link") 
     .data(links) 
    .enter().append("path") 
     .filter(function(d) { return d.source.depth != 0}) 
     .attr("class", "link") 
     .attr("d", diagonal); 

удалить ссылки на корневой узел и

var node = svg.selectAll(".node") 
     .data(nodes) 
    .enter().append("g") 
     .filter(function(d) { return d.depth != 0}) 
     .attr("class", "node") 
     .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 

удалить корневой узел

Смотрите пример: http://plnkr.co/edit/GkXtUoAvUa6nijNCERxz?p=preview

+0

А, я не знал о функции фильтра. Это было очень полезно, спасибо Тиму! Последующий вопрос, теперь, когда я показываю все узлы, большие, чем depth = 0, возможно, что в последнее время мой узел depth = 1? Я попытался настроить значения преобразования без везения. – Das

+0

Вы хотите объединить весь узел с глубиной 1? –

0

Что @JSBOB говорит, что, когда вы сделаете круг для корневого узла, установите его радиус 0, как показано на рисунке ниже:

node.append("circle") 
    .attr("r", function(d) { 
     if (d.depth == 0) {//for root node depth will be 0 
     return 0;//make the circle's radius 0 for root node. 
     } else { 
     return 4.5; 
     } 
    }).style("fill", function(d) { ... }); 

рабочего образца here

+0

Вы должны добавить 'если (d.depth == 0) {возвращение ""} еще возвращение d.name;' удалить заголовок тоже –

+0

Да, я согласен. Но @Tim в фрагменте кода, предоставленном OP выше, отсутствует текстовая часть, поэтому я не упоминал об этом. – Cyril

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