d3.js-树状布局-如何翻转它? [英] d3.js - Tree Layout - How can I flip it?

问题描述

我将此示例用于D3.js树布局.

I'm using this example for a D3.js tree layout.

http://mbostock.github.com/d3/talk/20111018/tree.html

我需要翻转它，所以根节点在右侧，而链接...等等.

I need to flip it, so the root node is on the right hand side, and the links... etc.

我该如何实现?

推荐答案

• 将每个节点的偏移量更改为从右侧而不是从左侧偏移:

  • Change the offset of each node to be from the right rather than offset from the left:

    // Normalize for fixed-depth.
    nodes.forEach(function(d) { d.y = d.depth * 180; });
    

  成为:

      // Normalize for fixed-depth from right.
      nodes.forEach(function(d) { d.y = w - (d.depth * 180); });
  

  • 将标签更改为相反侧

    • Change the labels to be on the opposite sides

      nodeEnter.append("svg:text")
        .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
        .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);
      

    成为:

        nodeEnter.append("svg:text")
          .attr("x", function(d) { return d.children || d._children ? 10 : -10; })
          .attr("dy", ".35em")
          .attr("text-anchor", function(d) { return d.children || d._children ? "start" : "end"; })    
          .text(function(d) { return d.name; })
          .style("fill-opacity", 1e-6);
    

    • 使根节点的原始位置位于右侧，而不是左侧，因此第一次转换不会很奇怪:

      • Make original position of the root node on the right hand side, rather than the left so first transition isn't weird:

        root = json;
        root.x0 = h / 2;
        root.y0 = 0;
        

      成为:

          root = json;
          root.x0 = h / 2;
          root.y0 = w;
      

      提琴: http://jsfiddle.net/Ak5tP/1/embedded/result/

      这篇关于d3.js-树状布局-如何翻转它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！