如何为D3实现的SVG环形进度条添加border-radius并调整百分比字体大小

问题根因说明 #

1. stroke-linecap不生效：你当前通过fill填充环形路径实现进度效果，stroke-linecap仅对路径的描边（stroke）属性生效，对填充区域无效。
2. 百分比字体无法调整：你创建文本元素时未显式指定font-size属性，默认使用浏览器继承的字体大小。

解决方案（已适配你的d3 v3版本） #

直接调整以下三处即可实现所有需求：

1. 给d3弧形生成器添加cornerRadius属性，即可实现填充环形的两端圆角效果，值设置为边框厚度的一半效果最优
2. 给百分比文本节点添加font-size属性，自定义数值即可调整文字大小
3. 可选添加SVG滤镜实现进度条阴影效果

修改后的完整代码如下：

JS代码

function drawProgress(percentage, element, svg) {
    if (svg) {
        svg.selectAll("*").remove();
    }
    var wrapper = element;
    var start = 0;

    var colours = {
        fill: '#3F88FB',
        track: '#DDDDDD',
        text: '#444444',
    }

    var radius = 34;
    var border = 8;
    var strokeSpacing = 4;
    var endAngle = Math.PI * 2;
    var formatText = d3.format('.0%');
    var boxSize = radius * 2;
    var count = percentage;
    var progress = start;
    var step = percentage < start ? -0.01 : 0.01;

    // 新增cornerRadius实现圆角，值设为border的一半即可
    var circle = d3.svg.arc()
        .startAngle(0)
        .innerRadius(radius)
        .outerRadius(radius - border)
        .cornerRadius(border/2);

    //setup SVG wrapper
    svg = d3.select(wrapper)
        .append('svg')
        .attr('width', boxSize)
        .attr('height', boxSize);

    // 可选：定义阴影滤镜，不需要可以删除这段
    var defs = svg.append('defs');
    var filter = defs.append('filter')
        .attr('id', 'progressShadow')
        .attr('x', '-50%')
        .attr('y', '-50%')
        .attr('width', '200%')
        .attr('height', '200%');
    filter.append('feGaussianBlur')
        .attr('in', 'SourceAlpha')
        .attr('stdDeviation', 2);
    filter.append('feOffset')
        .attr('dx', 0)
        .attr('dy', 0)
        .attr('result', 'offsetBlur');
    var feMerge = filter.append('feMerge');
    feMerge.append('feMergeNode');
    feMerge.append('feMergeNode')
        .attr('in', 'SourceGraphic');

    // ADD Group container
    var g = svg.append('g')
        .attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ')');

    //Setup track
    var track = g.append('g').attr('class', 'radial-progress');
    track.append('path')
        .attr('fill', colours.track)
        .attr('stroke-width', strokeSpacing + 'px')
        .attr('d', circle.endAngle(endAngle));

    //Add colour fill
    var value = track.append('path')
        .attr('fill', colours.fill)
        .attr('stroke-width', strokeSpacing + 'px')
        // 可选：添加阴影效果，不需要可以删除下面这行
        .attr('filter', 'url(#progressShadow)');

    //Add text value
    var numberText = track.append('text')
        .attr('fill', colours.text)
        .attr('text-anchor', 'middle')
        .attr('dy', '0.5rem')
        // 自定义字体大小，按需调整数值即可
        .attr('font-size', '14px');

    //update position of endAngle
    value.attr('d', circle.endAngle(endAngle * percentage));
    //update text value
    numberText.text(formatText(percentage));
}

var svgVisitas;
drawProgress(50 / 100, document.getElementById('radialprogressVisitas'), svgVisitas);

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="radialprogressVisitas"></div>

你可以按需调整cornerRadius、font-size以及阴影滤镜的stdDeviation（模糊度）、dx/dy（偏移量）参数适配你的设计需求。

内容的提问来源于stack exchange，提问作者Edgedancer