0

这是我的代码：我希望在一页中为许多电子邮件线程的每个主题提供多个树状图：

var w = 1350, h;
var margin = {top: 20, right: 120, bottom: 20, left: 120}
var tree = d3.layout.tree();
//.size([h, w - 160]);

var diagonal = d3.svg.diagonal().projection(function(d) {
    return [d.y, d.x];
});

//  .attr("width", w + 200)
//  .attr("height", h + 160)
//.append("svg:g")
//  .attr("transform", "translate(40, 0)");

d3.json("flare2.json", function(error, json) {
    for (var tree_key in json.children) {

        build_tree(json.children[tree_key])
    }

});

function build_tree(tree_obj) {
    var vis = d3.select("#chart").append("svg:svg")
    h = 20
    h = h + (tree_obj.count * 15)
    tree.size([h, w]);

    vis.attr("width", w +1000)
        .attr("height", h)
    var nodes = tree.nodes(tree_obj);

    var link = vis.selectAll("path.link").data(tree.links(nodes)).enter().append("svg:path").attr("class", "link").attr("d", diagonal);
    // .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.y + "," + d.x + ")";
    })

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

    node.append("svg:text").attr("dx", function(d) {
        return d.children ? -8 : 8;
    }).attr("dy", 3).attr("text-anchor", function(d) {
        return d.children ? "end" : "start";
    }).text(function(d) {
        return d.name;
    });
}

结果是：

部分隐藏的根主题

我不知道如何让它们出现，我尝试翻译但它不起作用。

这是 svg 节点的结果：

<svg width="2350" height="170"><path class="link" d="M0,85C225,85 225,17 450,17"></path><path class="link" d="M0,85C225,85 225,85 450,85"></path><path class="link" d="M0,85C225,85 225,153 450,153"></path><path class="link" d="M450,17C675,17 675,17 900,17"></path><path class="link" d="M900,17C1125,17 1125,17 1350,17"></path><path class="link" d="M450,85C675,85 675,85 900,85"></path><path class="link" d="M900,85C1125,85 1125,85 1350,85"></path><path class="link" d="M450,153C675,153 675,153 900,153"></path><path class="link" d="M900,153C1125,153 1125,153 1350,153"></path><g class="node" transform="translate(0,85)"><circle r="4.5"></circle><text dx="-8" dy="3" text-anchor="end">Re: Amusing atheists and anarchists</text></g><g class="node" transform="translate(450,17)"><circle r="4.5"></circle><text dx="-8" dy="3" text-anchor="end">Re: Amusing atheists and anarchists</text></g><g class="node" transform="translate(900,17)"><circle r="4.5"></circle><text dx="-8" dy="3" text-anchor="end">timmbake@mcl.ucsb.edu (Bake Timmons)</text></g><g class="node" transform="translate(1350,17)"><circle r="4.5"></circle><text dx="8" dy="3" text-anchor="start">alt.atheism</text></g><g class="node" transform="translate(450,85)"><circle r="4.5"></circle><text dx="-8" dy="3" text-anchor="end">Hard/Soft == Strong/Weak.  KISS!</text></g><g class="node" transform="translate(900,85)"><circle r="4.5"></circle><text dx="-8" dy="3" text-anchor="end">mam@mouse.cmhnet.org (Mike McAngus)</text></g><g class="node" transform="translate(1350,85)"><circle r="4.5"></circle><text dx="8" dy="3" text-anchor="start">alt.atheism</text></g><g class="node" transform="translate(450,153)"><circle r="4.5"></circle><text dx="-8" dy="3" text-anchor="end">Re: Amusing atheists and anarchists</text></g><g class="node" transform="translate(900,153)"><circle r="4.5"></circle><text dx="-8" dy="3" text-anchor="end">mccullou@snake2.cs.wisc.edu (Mark McCullough)</text></g><g class="node" transform="translate(1350,153)"><circle r="4.5"></circle><text dx="8" dy="3" text-anchor="start">alt.atheism</text></g></svg>
4

2 回答 2

1

由于没有人可以帮助这里是功能代码：

function build_tree(tree_obj,is_diagonal) {
    var height = tree_obj.count * 10
    var cluster = d3.layout.tree().size([height, width - 300]);

    var diagonal = d3.svg.diagonal().projection(function(d) {
        return [d.y, d.x];
    });

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

    var nodes = cluster.nodes(tree_obj);
    var link = vis.selectAll("path.link")
                    .data(cluster.links(nodes))
                    .enter().append("path")
                    .attr("class", "link")
    if (is_diagonal==true){
        link.attr("d", diagonal);
    } else {
        link.attr("d", elbow);
    };

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

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

    node.append("text").attr("dx", function(d) {
        return d.children ? -8 : 8;
    }).attr("dy", 3).attr("text-anchor", function(d) {
        return d.children ? "end" : "start";
    }).text(function(d) {
        return d.name;
    });
}
于 2013-02-04T17:41:33.237 回答
0

添加一个父元素g，然后translate(70,0)像：

var svg = d3.select(rawSvg[0]).
             attr("width", width).
             attr("height", height).
             append("g").
             attr("transform", "translate(70,0)");

然后将树大小设置为d3.layout.tree().size([height, width - 250]);.

于 2017-04-13T03:22:21.860 回答