我目前正在 AngularJS 应用程序中使用这个圆环图:
但是设计模型说我们想要这样,请注意圆弧绿色部分的 border-radius 属性:
如何向 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但是当我这样做时,它会为两个圆弧设置一个半径,它只需要存在于彩色圆弧上即可。有任何想法吗?预先感谢您的帮助!
最佳答案
您可以将圆 Angular 半径应用于 d3 圆弧,从而允许圆 Angular :
let arc = d3.svg
.arc()
.innerRadius(23)
.outerRadius(radius)
.cornerRadius(10);
但是,缺点是所有弧线的边框都是圆形的:
如果仅将cornerRadius应用于变暗的弧 - 另一个弧将不会填充圆 Angular 后面的背景。相反,我们可以附加一个圆弧(完整的 donut ),并将变暗的圆弧放在顶部并进行舍入(我的示例不适应您的代码,只是展示了如何完成它,也使用 d3v4,它使用 d3.arc()
而不是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>
关于javascript - 将 border-radius 属性添加到 D3js 圆环图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50144861/