javascript - 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();

});

这很好用，但我想圆某些弧的一侧(两个 Angular )。当圆 Angular 半径与 .cornerRadius() 一起提供时，但是，它会环绕所有四个 Angular 。

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

我也看到了 this question关于仅圆弧的某些 Angular 落，但它没有答案(自发布以来，D3 v4 已经问世)。

Answer 1

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

例如，假设我们有这个很好的圆弧:

      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>