d3.js：在可折叠径向簇中旋转颠倒的链接文本

Question

我需要在下面的代码中修复颠倒的链接文字：

var clusterData = nodeData;

var clusterData = [
  {
    "name": "Level 1",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Level 1",
        "children": [
          {
            "name": "Level 3: A",
            "parent": "Level 2: A",
            "children": [
              {
                "name": "Level 4: A",
                "parent": "Level 3: A",
                "children": [
                  {
                    "name": "Level 5: A",
                    "parent": "Level 4: A"
                  }
                ]
              }
            ]
          },
          {
            "name": "Level 3: B",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: C",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: D",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: E",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: F",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: G",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: H",
            "parent": "Level 2: A",
            "children": [
              {
                "name": "Level 4: C",
                "parent": "Level 3: H",
                "children": [
                  {
                    "name": "Level 5: C",
                    "parent": "Level 4: C"
                  }
                ]
              }
            ]
          },
          {
            "name": "Level 3: I",
            "parent": "Level 2: A",
            "children": [
              {
                "name": "Level 4: B",
                "parent": "Level 3: I",
                "children": [
                  {
                    "name": "Level 5: B",
                    "parent": "Level 4: B",
                      "children": [
                        {   
                            "name": "Level 6: A",
                            "parent": "Level 5: B"
                        }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "Level 3: J",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: K",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: L",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: M",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: N",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: O",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: P",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: Q",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: R",
            "parent": "Level 2: A"
          },
          {
            "name": "Level 3: S",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Level 1"
      },
      {
        "name": "Level 2: C",
        "parent": "Level 1"
      },
        {
        "name": "Level 2: D",
        "parent": "Level 1"
      },
      {
        "name": "Level 2: E",
        "parent": "Level 1"
      },
      {
        "name": "Level 2: F",
        "parent": "Level 1"
      },
      {
        "name": "Level 2: G",
        "parent": "Level 1"
      }
    ]
  }
];


var margin = {top: 20, right: 120, bottom: 20, left: 120},
    diameter = 1000;

var i = 0,
    duration = 350,
    root;

var tree = d3.layout.cluster()
    .size([360, 360])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 10) / a.depth; });

var diagonal = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })

var svg = d3.select(".wrapper").append("svg")
    .attr("class", "rootSVG")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("class", "rootG")
    .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")")


root = clusterData[0];
root.x0 = diameter / 2;
root.y0 = 0;

root.children.forEach(collapse); // start with all children collapsed
update(root);

function update(source) {

  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  nodes.forEach(function(d) { d.y = d.depth * 150; });

  // 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 "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .on("click", click)

  nodeEnter.append("image")
      .attr("width", 16)
      .attr("height", 16)
      .attr("xlink:href", function(d) {return d.icon ? d.icon : "/custom/customimages/NodeIcon.png";})
      .attr("transform", function(d, i) { return (i != 0)?"translate(0, -10)":"translate(0)"; })

  nodeEnter.append("text")
      .attr("class", "nodeLabel")
      .attr("x", 10)
      .attr("dy", ".35em")
      .attr("text-anchor", "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, i) { return i != 0?"rotate(" + (d.x - 90) + ")translate(" + d.y + ")":"translate(0)"; })

  nodeUpdate.select("text.nodeLabel")
      .style("fill-opacity", 1)
      .style("font-size", 10)
      .attr("text-anchor", function(d) { return d.x > 180 ? "end":"start"; })
      .attr("transform", function(d, i) { return d.x > 180 ? "rotate(180)translate(-32)":"translate(8)"; })

  var nodeExit = node.exit().transition()
      .duration(duration)
      .remove();

  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("id", function(d, i) {return "link" + i})

  function x(d) { return d.y * Math.cos((d.x - 90) / 180 * Math.PI); }
  function y(d) { return d.y * Math.sin((d.x - 90) / 180 * Math.PI); }

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", function(d) {
       return "M" + x(d.source) + "," + y(d.source) + "L" + x(d.target) + "," + y(d.target);
     });

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .remove();

  var linkText = svg.selectAll(".linkText")
      .data(links)
      .enter()
      .append("text")
      .attr("class", "linkText")
      .attr("font-size", 10)
      .attr("dx", 60)
      .append("textPath")
      .attr("xlink:href", function(d, i) { return "#link" + i; })
      .text(function(d) { return "Relationship"; }) 

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });    
}

// 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;
  }
  if(d.depth >= 4) {
    diameter = diameter + 150;
    document.getElementsByClassName("rootSVG")[0].setAttribute("width", diameter)
    document.getElementsByClassName("rootSVG")[0].setAttribute("height", diameter)
    document.getElementsByClassName("rootSVG")[0].setAttribute("transform", "translate(" + diameter/2 + ", " + diameter/2 + ")")
  }


  update(d);
}

// Collapse nodes
function collapse(d) {
  if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
        }
    }

如果我执行180度旋转，文本将转到径向树的另一侧。请帮忙。

我尝试手动插入文本并旋转它们，而不是使用文本路径。但是，在扩展节点后它不起作用。代码：

var linkText = svg.selectAll(".linkText")
      .data(links)
      .enter()
      .append("g")
      .attr("class", "linkText")
      .attr("transform", function(d, i) { return "rotate(" + (d.target.x - 90) + ", 100, 0)translate(" + d.target.y/2 + ")"; })
      .append("text")
      .attr("font-size", 10)
      .attr("dx", 45)
      .attr("transform", function(d, i) { return d.target.x > 180 ?"rotate(180, 70, 0)":"rotate(0)"; })
      .text(function(d) { return d.target.relationship?d.target.relationship:"Relationship"; })

无法提供jsFiddle，因为它没有为我显示输出。任何小提琴不仅仅是这一个。