Question

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

enter image description here

Answer 1

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

这里是working fiddle。实现解释如下。而且，这里有一个more advanced小提琴，它可以在不断增长的弧线上为剪辑路径设置动画。查看its predecessor以查看蒙版看起来如何不剪裁。

首先，您需要将图形表示为与d3绑定的数据数组。具体来说，你需要一个颜色和一个＆＃34;行命令＆＃34; （你在<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(0)颜色无（将所有颜色都保持灰色）。

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

最后，如果您愿意，可以按照[本文]中的建议包装所有代码并创建可重用的组件。（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方法。这将为您节省大量时间和精力。

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

3 个答案: