stackoom
  简体   繁体   中英

D3 Tree orientation

 原文  2015-12-04 18:05:30  4   3    javascript/ d3.js

Question

I'm working with the D3 Tree layout, similar to this jsfiddle , the only problem is that I need the orientation of each node to start at the top left of the layout and not on the top center. 

var nodeUpdate = node.transition()
  .duration(duration)
  .attr("transform", function(d) {         
    return "translate(" + d.y + "," + d.x + ")";
});

Something similar to this: 在此处输入图片说明

Any ideas on how to do that?

Thank you in advance.

3 answers

solution1
 1 ACCPTED  2015-12-04 18:56:54

Building off of this example . 

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
    links = tree.links(nodes);

// figure out the placement of the "top-most" node at each depth
var nodeMap = {};
nodes.forEach(function(d) { 
  if (!nodeMap[d.depth] || d.x < nodeMap[d.depth]){
    nodeMap[d.depth] = d.x;
  }
});
// shift all nodes up
nodes.forEach(function(d) { 
  d.y = d.depth * 100;
  d.x -= nodeMap[d.depth];
});

This produces: 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tree Example</title> <style> .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } </style> </head> <body> <!-- load the d3.js library --> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var treeData = [ { "name": "Top Level", "parent": "null", "children": [ { "name": "Level 2: A", "parent": "Top Level", "children": [ { "name": "Son of A", "parent": "Level 2: A" }, { "name": "Daughter of A", "parent": "Level 2: A" } ] }, { "name": "Level 2: B", "parent": "Top Level", "children": [ { "name": "Son of B", "parent": "Level 2: B" }, { "name": "Daughter of B", "parent": "Level 2: B" } ] } ] } ]; // ************** Generate the tree diagram ***************** var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0, duration = 750, root; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [dy, dx]; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); root = treeData[0]; root.x0 = height / 2; root.y0 = 0; update(root); function update(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. var nodeMap = {}; nodes.forEach(function(d) { if (!nodeMap[d.depth] || dx < nodeMap[d.depth]){ nodeMap[d.depth] = dx; } }); nodes.forEach(function(d) { dy = d.depth * 100; dx -= nodeMap[d.depth]; }); // Update the nodes… var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new nodes at the parent's previous position. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", click); nodeEnter.append("circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .style("fill-opacity", 1e-6); // Transition nodes to their new position. var nodeUpdate = node.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + dy + "," + dx + ")"; }); nodeUpdate.select("circle") .attr("r", 10) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeUpdate.select("text") .style("fill-opacity", 1); // Transition exiting nodes to the parent's new position. var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); nodeExit.select("circle") .attr("r", 1e-6); nodeExit.select("text") .style("fill-opacity", 1e-6); // Update the links… var link = svg.selectAll("path.link") .data(links, function(d) { return d.target.id; }); // Enter any new links at the parent's previous position. link.enter().insert("path", "g") .attr("class", "link") .attr("d", function(d) { var o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.transition() .duration(duration) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition() .duration(duration) .attr("d", function(d) { var o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }) .remove(); // Stash the old positions for transition. nodes.forEach(function(d) { d.x0 = dx; d.y0 = dy; }); } // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); } </script> </body> </html>

solution2
 0  2015-12-04 18:13:55

not only the nodes (x,y) should be interchanged but also the links connecting the nodes ie 

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

solution3
 0  2015-12-04 18:27:13

have a look at this example i made 

<!doctype html>
<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
    var data = {
        "name" : "A",
        "children" : [
        {
            "name" : "B",
            "children" : [
            {
                "name" : "F"
            },
            {
                "name" : "G"
            }
            ]
        },
        {
            "name" : "C",
            "children" : [
            {
                "name" : "H"
            },
            {
                "name" : "I"
            },
            {
                "name" : "J"
            }
            ]
        },
        {
            "name" : "D",
            "children" : [
            {
                "name" : "K"
            },
            {
                "name" : "L"
            }
            ]
        },
        {
            "name" : "E"
        }
        ]
    };

    var canvas = d3.select("body")
        .append("svg")
        .attr("width",600)
        .attr("height",500)
        .append("g")
            .attr("transform","translate(50,50)");

    var cluster = d3.layout.cluster()
        .size([400,400]);

    var nodes = cluster.nodes(data);
    var links = cluster.links(nodes);

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

    node.append("circle")
        .attr("r",5)
        .attr("fill","silver");

    node.append("text")
        .text(function(d) {return d.name;});

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

    canvas.selectAll(".link")
        .data(links)
        .enter()
        .append("path")
            .attr("class","link")
            .attr("fill","none")
            .attr("stroke","#ADADAD")
            .attr("d",diagonal); 

</script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to change orientation of a D3 tree layout by 90 degrees Bubble tree in d3? D3 layout tree is not rendering Edges for Collapsible tree D3 d3 tree node position D3 tree graph with links D3 Tree Layout Not Collapsing D3 Tree node on click D3: Hyperlinks in tree diagram D3 Radial Tree with Tooltip?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM