D3：带有增长弧度的仪表图

Question

我希望实现类似于增长的弧形，表示5个等级（见图）。 我的数据只有一个介于1-5之间的整数值。 您现在可以忽略中间的图标。 是否有可能在d3中实现类似的目标？ 我找不到任何这方面的例子。 此外，我尝试了一个切断的馅饼（甜甜圈）图表方法，但我不能成为越来越多的弧...我会感激任何帮助！ 感谢那。

Answer 1

您可以使用d3执行此操作，而不依赖于外部图像，SVG精灵或DOM中的任何内容 - 只需d3.js.

这是一个工作小提琴 。 实现解释如下。 而且，这里还有一个更先进的小提琴，可以在不断增长的弧线上设置剪辑路径。 看看它的前身 ，看看面具如何看起来没有剪裁。

首先，您需要将图形表示为与d3绑定的数据数组。 具体来说，你需要一个颜色和一个“行命令”（你在<path d="...">指定给d的字符串。这样的东西：

var segmentData = [
    { color:"#ED6000", cmd:"M42.6,115.3c5.2,1.5,11,2.4,16.8,2.4c1.1,0,2.7,0,3.7-0.1v-2.2c-7,0-13.1-1.3-18.8-3.6L42.6,115.3z" },
    { color:"#EF7D00", cmd:"M25.7,99.3c4.3,4.7,9.5,8.6,15.3,11.3l-1.4,3.8c-6.9-2.4-13.2-6.1-18.6-10.8L25.7,99.3z" },
    { color:"#F4A300", cmd:"M23.7,97c-5.2-6.4-8.8-14-10.3-22.4L2.9,75.7c2.9,10,8.5,18.9,15.8,25.9L23.7,97z" },
    { color:"#F7BC00", cmd:"M13,71.5c-0.2-2-0.4-4-0.4-6c0-10.7,3.4-20.6,9.2-28.8L9.4,28.3c-5.6,9-8.9,19.6-8.9,30.9  c0,4.6,0.6,9.1,1.6,13.5L13,71.5z" },
    { color:"#FFCF36", cmd:"M63,15.7V0.8c-1-0.1-2.5-0.1-3.7-0.1c-19.9,0-37.5,9.9-48.1,25l12.7,8.6C33.1,23,46,15.7,63,15.7z" }
];

然后你需要一个空的<svg> ，可能还需要一个<g>来绘制图形：

var svg = d3.select("body").append("svg")
    .attr("width", 125)
    .attr("height", 125);

var gauge = svg.append("g");

然后使用d3绑定创建段：

var segments = gauge.selectAll(".segment")
    .data(segmentData);
segments.enter()
    .append("path")
    .attr("fill", function(d) { return d.color; })
    .attr("d", function(d) { return d.cmd; });

这只是创建图形，但不会根据整数值对其进行着色。 为此，您可以定义update功能：

function update(value) {
    segments
        .transition()
        .attr("fill", function(d, i) {
            return i < value ? d.color : "#ccc";
        })
}

调用update(4)将为最后一段update(4) 。 调用update(0) color none（将所有这些都保持为灰色）。

在小提琴中，还有一个tick()函数，它在setTimeout的基础上使用新值调用update ，但这仅适用于demo。

最后，如果您愿意，可以按照[本文]中的建议包装所有代码并创建可重用的组件。（ http://bost.ocks.org/mike/chart/ ）

Answer 2

因为它是相对简单的图片，我会使用一个精灵，有5种变化。 这比使用d3容易得多并给出相同的结果。 （你可以使用一些在线工具，如http://spritepad.wearekiss.com/ ）

Answer 3

如果你想模仿duolingo进度图像，你可以简单地用自己的图像复制他们的解决方案。 他们正在使用sprite： http ：//d7mj4aqfscim2.cloudfront.net/images/skill-strength-sprite2.svg而不是d3.js方法。 这将为您节省大量的时间和精力。