D3.js дерева с нечетным числом вершин, ребра не показано

Question

У меня есть следующий код JavaScript, который использует библиотеку D3.js нарисовать дерево (это следует стандартной структуре, можно найти в различных интернетах-уроках):

var json = { 
    "name": "A", 
     "children": [{ 
     "name": "B" 
    }] 
}; 

var tree = d3.layout.tree().size([200, 200]); 

var nodes = tree.nodes(json); 

var vis = d3.select("#chart").attr("width", 300) 
    .attr("height", 300) 
    .append("svg:g") 
    .attr("transform", "translate(40, 40)"); 

var diagonal = d3.svg.diagonal(); 

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

var node = vis.selectAll("g.node").data(nodes).enter().append("svg:g") 
    .attr("class", "node") 
    .attr("transform", function (d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
}); 

node.append("svg:circle").attr("r", 10); 

node.append("svg:text").attr("dx", function (d) { 
    return 10; 
}) 
    .attr("dy", 10) 
    .attr("text-anchor", function (d) { 
    return "start"; 
}) 
    .text(function (d) { 
    return d.name; 
}); 

JSFIDDLE

Он работает в основном хорошо, для деревьев, в которых вершина имеет нечетное число детей (1, 3, ...), за исключением; в этом случае ребро для нечетной вершины не будет нарисовано (например, в приведенном выше примере край между A и B не отображается). Что мне не хватает?

Answer 1

Вам не хватает стиля для ссылок на узлы. Изменение Что это:

<style> 
.link { 
    fill: none; 
    stroke: #ccc; 
    stroke-width: 4.5px; 
} 
</style> 

Или установите его на самой ссылке:

.attr("d", diagonal).attr({ 'fill': 'none', 'stroke': 'grey', 'stroke-width': 4 }); 

Это зависит от нечетного VS. четное число, потому что по умолчанию путь не получает удар и цвет заливки черный , Так что прямая линия не появляется, но изогнутые заполняются.