javascript - 和弦图中的文本对齐

问题描述

我D3.js在我的应用程序中使用和弦图。
下面是我的代码。
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font: 20px sans-serif;
    }
    
    .group-tick line {
      stroke: #000;
    }
    
    .ribbons {
      fill-opacity: 0.67;
    }
  </style>
</head>

<body>
  <svg width="1000" height="1000"></svg>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    var matrixData = {
      "Occupants": [0, 10, 10, 10, 10, 0, 0, 0, 10, 10, 10, 10, 10],
      Flooring: [70, 0, 0, 0, 0, 0, 30, 0, 0, 0, 0, 0, 0],
      Millwork: [40, 0, 0, 0, 0, 0, 60, 0, 0, 0, 0, 0],
      Ceilings: [60, 0, 0, 0, 0, 0, 40, 0, 0, 0, 0, 0, 0],
      "Wet Applied Products": [60, 0, 0, 0, 0, 0, 40, 0, 0, 0, 0, 0, 0],
      "Curtain Wall": [0, 0, 0, 0, 0, 0, 100, 0, 0, 0, 0, 0, 0],
      "Environment": [0, 10, 10, 10, 10, 0, 10, 0, 10, 10, 10, 0, 10],
      Roofing: [0, 0, 0, 0, 0, 0, 100, 0, 0, 0, 0, 0, 0],
      Insulation: [50, 0, 0, 0, 0, 0, 50, 0, 0, 0, 0, 0, 0],
      MEPFP: [40, 0, 0, 0, 0, 0, 60, 0, 0, 0, 0, 0, 0],
      Structure: [50, 0, 0, 0, 0, 0, 50, 0, 0, 0, 0, 0, 0],
      "Furniture": [90, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0]
    }

    matrix = Object.values(matrixData);
    matrixKeys = Object.keys(matrixData);

    console.log(matrixKeys);

    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      outerRadius = Math.min(width, height) * 0.5 - 150,
      innerRadius = outerRadius - 30;

    var formatValue = d3.formatPrefix(",.0", 1e3);

    var chord = d3.chord()
      .padAngle(0.024)
      .sortSubgroups(d3.descending);

    var arc = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    var ribbon = d3.ribbon()
      .radius(innerRadius);

    var color = d3.scaleOrdinal()
      .domain(d3.range(4))
      .range(["#6FCDE3",
        "#D7DAE5",
        "#D7DAE5",
        "#D7DAE5",
        "#D7DAE5",
        "#D7DAE5",
        "#E5E52B",
        "#D7DAE5",
        "#D7DAE5",
        "#D7DAE5",
        "#D7DAE5",
        "#D7DAE5"
      ]);

    var g = svg.append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(75)")
      .datum(chord(matrix));

    var group = g.append("g")
      .attr("class", "groups")
      .selectAll("g")
      .data(function(chords) {
        return chords.groups;
      })
      .enter().append("g");

    group.append("path")
      .style("fill", function(d) {
        return color(d.index);
      })
      .style("stroke", function(d) {
        return d3.rgb(color(d.index)).darker();
      })
      .attr("d", arc);

    var groupTick = group.selectAll(".group-tick")
      .data(function(d) {
        return groupTicks(d, 1e3);
      })
      .enter().append("g")
      .attr("class", "group-tick")
      .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 75) +
          ") translate(" + outerRadius + ",2)";
      });

    groupTick.append("line")
      .attr("x2", 6);

    groupTick
      .filter(function(d) {
        return d.value % 5e3 === 0;
      })
      .append("text")
      .attr("x", 8)
      .attr("dy", ".35em")
      .attr("transform", function(d) {
        return d.angle > Math.PI / 2 && d.angle < Math.PI * 3 / 2 ? "rotate(180) translate(-16)" : null;
      })
      .style("text-anchor", function(d) {
        return d.angle > Math.PI / 2 && d.angle < Math.PI * 3 / 2 ? "end" : null;
      })
      .text(function(d) {
        return matrixKeys[d.index];
      });

    g.append("g")
      .attr("class", "ribbons")
      .selectAll("path")
      .data(function(chords) {
        return chords;
      })
      .enter().append("path")
      .attr("d", ribbon)
      .style("fill", function(d) {
        return color(d.target.index);
      })
      .style("stroke", function(d) {
        return d3.rgb(color(d.target.index)).darker();
      });

    // Returns an array of tick angles and values for a given group and step.
    function groupTicks(d, step) {
      var k = (d.endAngle - d.startAngle) / d.value;
      return d3.range(0, d.value, step).map(function(value) {
        return {
          index: d.index,
          value: value,
          angle: value * k + d.startAngle
        };
      });
    }
  </script>
</body>

</html>
它工作正常，我得到以下结果。
在这里，我想像下图一样对齐文本。
而且在生成的图像中，如果文本长度更长，它会被隐藏。可以包起来吗？
标签： javascriptd3.js
javascript - 和弦图中的文本对齐

问题描述

解决方案

推荐阅读
