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() 提供时，它会圆化所有四个角。

我知道有 various ways 可以选择性地圆化 矩形的角 ，但我希望有一些通用的方法可以对圆弧执行此操作。

我也看到了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>

D3 圆弧的一侧

Round One Side of D3 Arc

javascript

graphics

svg

vector-graphics

d3.js