将边框半径属性添加到 D3js 圆环图

Question

我有这个甜甜圈图目前在 AngularJS 应用程序中工作：

但是设计模型说我们想要这样，请注意圆弧绿色部分的边界半径属性：

如何为 d3js 输出的 SVG 添加边框半径，我目前使用的代码如下所示：

let data = [
    {
        label: 'Data',
        count: scope.data
    },
    {
        label: 'Fill',
        count: 100 - scope.data
    }
];

let width = 60;
let height = 60;
let radius = Math.min(width, height) / 2;
let color = d3.scale
    .ordinal()
    .range(['#3CC692', '#F3F3F4']);
let selector = '#donut-asset-' + scope.chartId;

d3
    .select(selector)
    .selectAll('*')
    .remove();

let svg = d3
    .selectAll(selector)
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr(
        'transform',
        'translate(' + width / 2 + ',' + height / 2 + ')'
    );
let arc = d3.svg
    .arc()
    .innerRadius(23)
    .outerRadius(radius);
let pie = d3.layout
    .pie()
    .value(function(d) {
        return d.count;
    })
    .sort(null);
let path = svg
    .selectAll('path')
    .data(pie(data))
    .enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', function(d, i) {
        return color(d.data.label);
    });
let legend = svg
    .selectAll('.legend')
    .data(data)
    .enter()
    .append('g')
    .attr('class', 'legend')
    .attr('transform', function(d, i) {
        return 'translate(' + 0 + ',' + 0 + ')';
    });
legend
    .append('text')
    .attr('x', 1)
    .attr('y', 1)
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'central')
    .text(function(d) {
        return d.count + '%';
    });

};

我知道使用 cornerRadius，但是当我这样做时，它会为两个圆弧设置一个半径，它只需要存在于彩色圆弧上即可。有任何想法吗？在此先感谢您的帮助！

Answer 1

尝试使用笔画属性，例如：

行程
stroke-dasharray
stroke-dashoffset
描边线帽
笔划线连接
行程斜接限制
描边不透明度
笔画宽度

并将条形宽度设置为较低的值，或 0。

参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

但更好的方法是在canvas上制作图表，因为你可以绘制任何你想要的东西。或者使用图书馆。

Answer 2

您可以将圆角半径应用到 d3 圆弧，这允许圆角：

let arc = d3.svg
    .arc()
    .innerRadius(23)
    .outerRadius(radius)
    .cornerRadius(10);

但是，缺点是所有圆弧的边界都是圆的：

如果您仅将 cornerRadius 应用于变暗的圆弧 - 其他圆弧将不会填充圆角后面的背景。相反，我们可以附加一个圆弧（完整的甜甜圈）并将变暗的圆弧放在顶部并进行舍入（我的示例没有调整您的代码，只是展示了它是如何完成的，还有使用 d3.arc() 的 d3v4而不是 d3.svg.arc() ):

var backgroundArc = d3.arc()
  .innerRadius(30)
  .outerRadius(50)
  .startAngle(0)
  .endAngle(Math.PI*2);
  
var mainArc = d3.arc()
  .innerRadius(30)
  .outerRadius(50)
  .cornerRadius(10)
  .startAngle(0)
  .endAngle(function(d) { return d/100*Math.PI* 2 });
  
var data = [10,20,30,40,50] // percents.
  
var svg = d3.select("body").append("svg")
  .attr("width", 600)
  .attr("height", 200);
  
var charts = svg.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform",function(d,i) { 
     return "translate("+(i*100+50)+",100)";
  });
  
charts.append("path")
  .attr("d", backgroundArc)
  .attr("fill","#ccc")

charts.append("path")
  .attr("d", mainArc) 
  .attr("fill","orange")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

将边框半径属性添加到 D3js 圆环图

Add border-radius property to D3js Donut Chart

javascript

jquery

d3.js

angularjs

donut-chart

将边框半径 属性 添加到 D3js 圆环图

Add border-radius property to D3js Donut Chart

javascript

jquery

d3.js

angularjs

donut-chart

将边框半径属性添加到 D3js 圆环图