Question

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

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

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

我怎样才能做到这一点？

Answer 1

将每个节点的偏移量改为右边而不是左边偏移量：

// 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); });

将标签更改为对面

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);

将根节点的原始位置放在右侧，而不是左侧，因此第一次转换并不奇怪：
```
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 - 树形布局 - 如何翻转它？

1 个答案: