1

D3.jsライブラリを使用してツリーを描画する次の JavaScript コードがあります (さまざまなオンライン チュートリアルで見つけることができる標準的な構造に従います)。

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 の間のエッジは表示されません)。私は何が欠けていますか？

4

1 に答える 1

3

ノード リンクのスタイルがありません。これの何かのバリエーション：

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

または、リンク自体に設定します。

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

デフォルトでは、パスにはストロークがなく、塗りつぶしの色が黒であるため、奇数と偶数に依存します。したがって、直線は表示されませんが、曲線は塗りつぶされます。

于 2013-05-29T14:07:46.047 に答える