Question

我使用d3.arc渲染径向组件。代码是：

https://codepen.io/zhaoyi0113/pen/PEgYZX

当前代码呈现具有百分比的弧，颜色为红色。见下面的截图：

我想设置不同百分比的颜色。例如，显示绿色从0％到20％，橙色从20％到50％，红色显示在50％以上。如何在d3上进行此更改？

我还需要提一下，我想在径向组件中显示所有相关的颜色。例如，前20％是绿色，它显示橙色从20％到50％，红色显示50％以上。

Answer 1

您所描述的只是一张带有自定义着色的传统圆环图：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="//d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <svg width="960" height="500"></svg>
  <script>
    var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto

    // An arc function with all values bound except the endAngle. So, to compute an
    // SVG path string for a given angle, we pass an object with an endAngle
    // property to the `arc` function, and it will return the corresponding string.
    var arc = d3.arc()
      .innerRadius(80)
      .outerRadius(100)
      .cornerRadius(20);

    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    // Add the background arc, from 0 to 100% (tau).
    var background = g.append("path")
      .datum({
        endAngle: tau
      })
      .style("fill", "#ddd")
      .attr("d", arc);

    var data = [.2, .3, .51];
    var c = d3.scaleThreshold()
      .domain([.201, .501, 1])
      .range(["green", "orange", "red"]);

    var pie = d3.pie()
      .sort(null)
      .value(function(d) {
        return d;
      });

    g.selectAll(".arc")
      .data(pie(data))
      .enter()
      .append("path")
      .attr("class", "arc")
      .style("fill", function(d) {
        return c(d.value);
      })
      .attr("d", arc);
  </script>
</body>

</html>

＆＃13;

如何以不同的百分比渲染不同颜色的d3.arc？

1 个答案: