D3翻转标签饼图

Question

我想在我的分层边缘捆绑（饼图）中翻转底部标签，其中表示＆＃34; Projekter＆＃34;所以它的可读性是可能的吗？我有这个小问题来证明：https://jsfiddle.net/wq8es4tn/

我的heb.js：

＆＃13;

＆＃13;

var diameter = 1200,
    radius = diameter / 2,
    innerRadius = radius - 350,
    m0,
    rotate = 0,
    pi = Math.PI;



var cluster = d3.layout.cluster()
    .size([360, innerRadius])
    //sort NULL HVIS IKKE DEN SKAL SORTERES!
    .sort(function (a, b) { return d3.ascending(a.key, b.key); })
	.separation(function (a, b) { return (a.parent == b.parent ? 1 : 2.5) }) //2.2 min standard
    .value(function (d) { return d.size; });

var bundle = d3.layout.bundle();


var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(0.100)
    .radius(function (d) { return d.y; })
    .angle(function (d) { return d.x / 180 * Math.PI; });

var svg = d3.select("#chart").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

document.getElementById("chart").align = "center";


var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

d3.json("https://api.myjson.com/bins/4v2s5", function (error, classes) {
    if (error) throw error;

    var nodes = cluster.nodes(packageHierarchy(classes)),
        links = packageImports(nodes);

    link = link
        .data(bundle(links))
      .enter().append("path")
        .each(function (d) { d.source = d[0], d.target = d[d.length - 1]; })
        .attr("class", "link")
        .attr("xlink:href", function (d) { return d.url; })
        .attr("d", line);

    node = node
        .data(nodes.filter(function (n) { return !n.children; }))
      .enter()
    .append('a')
      .attr("xlink:href", function (d) { return d.url; })
      .attr('target', '_blank')
    .append("text")
      .attr("class", "node")
        .attr("dy", ".31em")
        .attr("transform", function (d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 32) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
        .style("text-anchor", function (d) { return d.x < 180 ? "start" : "end"; })
        .text(function (d) { return d.key; })
        .on("mouseover", mouseovered)
        .on("mouseout", mouseouted);


    var groupData = svg.selectAll("g.group")
.data(nodes.filter(function (d) { return (d.key == 'FORSKERE' || d.key == 'PROJEKTER' || d.key == 'ME' || d.key == 'ECE' || d.key == 'CAE' || d.key == 'BCE') && d.children; })).enter().append("group")
    .attr("class", "group"); //MH - why do we need this group - these elements are empty. Shouldn't this just be an array? Find out how to delete the svg elements without getting rid of the data, which is needed below.


    var groupArc = d3.svg.arc()
          .innerRadius(radius - 350)
          .outerRadius(radius - 320)
      .startAngle(function (d) { return (findStartAngle(d.__data__.children) - 1.5) * pi / 180; })
      .endAngle(function (d) { return (findEndAngle(d.__data__.children) + 1.5) * pi / 180 });

    var arc_and_text = svg.selectAll("g.arc")
      .data(groupData[0])
      .enter().append("svg:g")
      .attr("class", "arc_and_text");

    var arc_path = arc_and_text.append("svg:path")
      .attr("d", groupArc)
      .attr("class", "groupArc")
      .attr("id", function (d, i) { return "arc" + i; })
      .style("fill", "#1f77b4")
      .style("fill-opacity", 0.4) 

    var arc_text = arc_and_text.append("text")
      .attr("class", "arc_text")
         .attr('text-anchor', 'middle')
      .attr("dy", 21);

    arc_text.append("textPath")
      .attr("xlink:href", function (d, i) { return "#arc" + i; })
      .attr("class", "arc_text_path")
       .attr('startOffset', '20%')
      .style("fill", "#ffffff")
        .style('font-size', '100%')
      .text(function (d, i) { return d.__data__.key; });

});


function mouseovered(d) {
    node
        .each(function (n) { n.target = n.source = false; });

    link
        .classed("link--target", function (l) { if (l.target === d) return l.source.source = true; })
        .classed("link--source", function (l) { if (l.source === d) return l.target.target = true; })
      .filter(function (l) { return l.target === d || l.source === d; })
        .each(function () { this.parentNode.appendChild(this); });

    node
        .classed("node--target", function (n) { return n.target; })
        .classed("node--source", function (n) { return n.source; });
}

function mouseouted(d) {
    link
        .classed("link--target", false)
        .classed("link--source", false);

    node
        .classed("node--target", false)
        .classed("node--source", false);
}

d3.select(self.frameElement).style("height", diameter + "px");


function cross(a, b) {
    return a[0] * b[1] - a[1] * b[0];
}

function dot(a, b) {
    return a[0] * b[0] + a[1] * b[1];
}

function findStartAngle(children) {
    var min = children[0].x;
    children.forEach(function (d) {
        if (d.x < min)
            min = d.x;
    });
    return min;
}

function findEndAngle(children) {
    var max = children[0].x;
    children.forEach(function (d) {
        if (d.x > max)
            max = d.x;
    });
    return max;
}

// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
    var map = {};

    function find(name, data) {
        var node = map[name], i;
        if (!node) {
            node = map[name] = data || { name: name, children: [] };
            if (name.length) {
                node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
                node.parent.children.push(node);
                node.key = name.substring(i + 1);
            }
        }
        return node;
    }

    classes.forEach(function (d) {
        find(d.name, d);
    });

    return map[""];
}

// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
    var map = {},
        imports = [];

    // Compute a map from name to node.
    nodes.forEach(function (d) {
        map[d.name] = d;
    });

    // For each import, construct a link from the source to target node.
    nodes.forEach(function (d) {
        if (d.imports) d.imports.forEach(function (i) {
            imports.push({ source: map[d.name], target: map[i] });
        });
    });

    return imports;

}

＆＃13;

body {
    /*background-image: url("farve.jpg");*/
    background-color:rgb(40,54,91);
    overflow: auto;
}



h2 {
    text-align: center;
    color: #F5F5F5; /* Overskriftens farve Hvid */
}

#chart { /*ROTERING AF SVG*/
    margin-top: 0px;
}

svg {
}

.arc_text_path {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#curve-text {
    border: 1px solid black;
}

.dkey {
    color:red;
}


#curve-line {
    fill: none;
    width: 100%;
    border: 1px solid black;
}

.node {
    font-size: 14px;
    fill: #bbb;
        -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .node:hover {
        fill: #000;
    }

.link {
    stroke: steelblue;
    stroke-opacity: .1;
    fill: none;
    pointer-events: none;
}

.node:hover,
.node--source,
.node--target {
    font-weight: 700;
}

.node--source {
    fill: #2ca02c; /*Grøn streg*/
}

.node--target {
    fill: #d62728; /*Rød Streg*/
}

.link--source,
.link--target {
    stroke-opacity: 1;
    stroke-width: 2px;
}

.link--source {
    stroke: #d62728; /*Rød Streg*/
}

.link--target {
    stroke: #2ca02c; /*Grøn Streg*/
}

＆＃13;

<div id="chart"></div>

＆＃13;

＆＃13;

＆＃13;

感谢我能得到的任何帮助。我已经尝试了很多天，所以希望有人提出解决方案。干杯！