D3 圆弧的一侧

Question

我正在使用 D3.js 的内置 arc 函数为我的数据生成 SVG <path>s。

.attr("d", function(element, index) {

    var arc = d3.arc()
        .innerRadius(iR)
        .outerRadius(iR + 10)
        .startAngle(element[1])
        .endAngle(element[2])
        .cornerRadius(isRounded ? cR : 0);

    return arc();

});

这非常有效，但我想将某些弧线的一侧（两个角）弄圆。但是，当使用.cornerRadius() 提供角半径时，它会将所有四个角都倒圆。

我知道有variousways 可以选择性地圆角矩形，但我希望有一些通用的方法可以为弧线做到这一点。

我还看到this question 只对圆弧的某些角进行圆角处理，但它没有答案（D3 v4 自发布以来已经发布）。

Answer 1

即使使用v4 API，仍然没有直接的方法可以做到这一点。看源码，cornerRadius变成了计算整个圆弧（全部4个角）的固定值。最简单的解决方法是为每个数据点附加两条弧线，第二条弧线刚好填充角落。

例如，假设我们有这个漂亮的圆弧：

      var myArcs = [
        [0, 45],
        [180, 300]
      ];

      var vis = d3.select('body')
        .append('svg')
        .attr('width', 400)
        .attr('height', 400);

      var arc = d3.arc()
        .innerRadius(80)
        .outerRadius(150)

      var someArcs = vis.selectAll('path')
        .data(myArcs)
        .enter();

      someArcs
        .append("path")
        .attr("transform", "translate(200,200)")
        .attr("d", function(d) {
          arc.startAngle(d[0] * (Math.PI / 180))
            .endAngle(d[1] * (Math.PI / 180))
            .cornerRadius(20);
          return arc();
        })
        .attr("fill", function(d, i) {
          return d3.schemeCategory10[i];
        });

<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

我的修复看起来像：

var myArcs = [
      [0, 45],
      [180, 300]
    ];

    var vis = d3.select('body')
      .append('svg')
      .attr('width', 400)
      .attr('height', 400);

    var arc = d3.arc()
      .innerRadius(80)
      .outerRadius(150)

    var someArcs = vis.selectAll('path')
      .data(myArcs)
      .enter();

    someArcs
      .append("path")
      .attr("transform", "translate(200,200)")
      .attr("d", function(d) {
        arc.startAngle(d[0] * (Math.PI / 180))
          .endAngle(d[1] * (Math.PI / 180))
          .cornerRadius(20);
        return arc();
      })
      .attr("fill", function(d, i) {
        return d3.schemeCategory10[i];
      });

    someArcs
      .append("path")
      .attr("transform", "translate(200,200)")
      .attr("d", function(d) {
        arc.startAngle(d[0] * (Math.PI / 180))
          .endAngle((d[0] + 10) * (Math.PI / 180))
          .cornerRadius(0);
        return arc();
      })
      .attr("fill", function(d, i) {
        return d3.schemeCategory10[i];
      });

  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>