Question

我正在尝试在弧上正确添加标签。因为弧形角度很小，所以标签不能适合弧形和“弯曲”。如何使标签适合弧线保持相同的字体大小，相同的半径和相同的弧数？

＆＃13;

<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    .layer_1 {
      stroke: none;
    }
    
    .layer_o {
      stroke: none;
    }
  </style>
</head>


<body>

  <script>

    //build test data
    var dict = []; // create an empty array

    var angle = 0;
    var nb_arcs = 255;
    var max_radius = 200;
    var colorScale = d3.scaleOrdinal(d3["schemeCategory10"])

    for (var i = 0; i < nb_arcs; i++) {

      var outer_radius_1 = Math.random() * max_radius;

      dict.push({
        id: i,
        layer: 1,
        inner_radius: 0,
        outer_radius: outer_radius_1,
        start_angle: angle,
        end_angle: angle + 2 * Math.PI / nb_arcs
      });

      dict.push({
        id: nb_arcs + i,
        layer: 2,
        inner_radius: outer_radius_1,
        outer_radius: max_radius,
        end_angle: 2,
        start_angle: angle,
        end_angle: angle + 2 * Math.PI / nb_arcs
      });

      angle = angle + 2 * Math.PI / nb_arcs;
    }

    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
      .append("g")
      .attr("transform", "translate(480,250)");

    var g = svg.selectAll("g").enter().append("g");

    var path = svg.selectAll("path")
      .data(dict)
      .enter().append("path")
      .attr("id", function(d) {
        return d.id;
      })
      .attr("class", function(d) {
        if (d.layer == 1) {
          return "layer_1";
        } else {
          return "layer_o";
        }
      })
      .attr("d", d3.arc()
        .innerRadius(function(d) {
          return d.inner_radius;
        })
        .outerRadius(function(d) {
          return d.outer_radius;
        })
        .startAngle(function(d) {
          return d.start_angle;
        })
        .endAngle(function(d) {
          return d.end_angle;
        }))
      .attr("fill", function(d) {
        return colorScale(d.layer);
      })
      .style('stroke', function(d) {
        return colorScale(d.layer);
      })
      .style('stroke-width', '0.3');

    svg.selectAll("text")
      .data(dict)
      .enter()
      .append("text")
      .attr('dy', function(d) {
        if (d.id % 2 == 0) {
          return -13;
        } else {
          return -5;
        }
      })
      .attr("class", "labelText")
      .append("textPath") //append a textPath to the text element
      .attr("xlink:href", function(d) {
        return "#" + d.id;
      })
      .style("font-size", "5px")
      .text(function(d) {
        if (d.layer == 2) {
          return "#" + d.id;
        } else {
          return "";
        }
      })
      .style("text-anchor", "middle")
      .attr('startOffset', function(d) {
        if (d.id % 2 == 0) {
          return 3;
        } else {
          return 0;
        }
      })
      .attr("fill", "black");
  </script>
</body>

</html>

＆＃13;

弧形路径上的标签弯曲

0 个答案: