树形图中的链接 - 层次结构布局D3.JS

时间:2016-08-10 15:19:17

标签: javascript d3.js d3.js-v4

所以,我一直试图使用d3.js的树状图布局来显示流行的生命树数据,这与http://bl.ocks.org/mbostock/4063570完全相似。

我在图表中的链接有问题,您可以在屏幕截图中看到。我也发布了代码,不知道到底哪里出错了。

var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        g = svg.append("g").attr("transform", "translate(40,0)");

var tree = d3.cluster()
        .size([height, width - 160]);


d3.text("test.txt", function(error, data) {
    if (error) throw error;

    var dat = parseNewick(data);

    console.log(dat);
    var root = d3.hierarchy(dat)
            .sort(function(a,b){return b.height - a.height });

    tree(root);

    var link = g.selectAll(".link")
            .data(root.descendants().slice(1))
            .enter().append("path")
            .attr("class", "link")
            .attr("d", function(d) {
                return "M" + d.y + "," + d.x
                        + "C" + (d.parent.y + 100) + "," + d.x
                        + " " + (d.parent.y + 100) + "," + d.parent.x
                        + " " + d.parent.y + "," + d.parent.x;
            });

    var node = g.selectAll(".node")
            .data(root.descendants())
            .enter().append("g")
            .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

    node.append("circle")
            .attr("r", 2.5);

enter image description here     });

0 个答案:

没有答案