title: D3 Flip label pie chart
body: <p>I want to flip the bottom label in my hierarchical edge bundling(pie chart) where it says "Projekter" so it's readable, is that a possibility? i have this jfiddle to demonstrate: <a href="https://jsfiddle.net/wq8es4tn/" rel="nofollow">https://jsfiddle.net/wq8es4tn/</a></p>
  
  <p>my heb.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 180 ? "" : "rotate(180)"); })
          .style("text-anchor", function (d) { return d.x &lt; 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') &amp;&amp; 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 &lt; min)
              min = d.x;
      });
      return min;
  }
  
  function findEndAngle(children) {
      var max = children[0].x;
      children.forEach(function (d) {
          if (d.x &gt; 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;
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>appreciate any help i can get. I have tried for many days now, so hoping for someone to come up with a solution. Cheers!</p>