D3：弧度增大的仪表图答案

【问题标题】：D3: gauge chart with growing arcD3：弧度增大的仪表图
【发布时间】：2015-05-10 19:12:51
【问题描述】：

我想要实现类似于指示 5 个级别的不断增长的弧线（见图）。我的数据只有一个介于 1-5 之间的整数值。您现在可以忽略中间的图标。有没有可能在d3中实现类似的东西？我找不到任何例子。此外，我尝试使用截断饼图（甜甜圈）图表方法，但我无法做出不断增长的弧线......我将不胜感激任何帮助！谢谢。

【问题讨论】：

感谢您到目前为止的回答。希望其他人提出 d3 解决方案。否则我必须接受你的一个答案。

标签： javascript d3.js

【解决方案1】：

您可以使用 d3 做到这一点，而无需依赖外部图像、SVG sprite 或 DOM 中的任何东西——只需 d3.js。

这是working fiddle。下面解释实现。而且，这里有一个more advanced 小提琴，它可以在不断增长的弧线上动画剪辑路径。查看its predecessor 以了解蒙版在没有剪辑的情况下的外观。

首先，您需要将图形表示为您使用 d3 绑定到的数据数组。具体来说，您需要一种颜色和一个“行命令”（您分配给 d 的字符串，如 <path 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) color none（将它们全部保留为灰色）。

在小提琴中，还有一个 tick() 函数调用 update 在 setTimeout 基础上的新值，但这只是为了演示。

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

【讨论】：

正是我想要的。谢谢你！此外，您如何获得段 cmd 数据会很有趣。
哦，是的，我忘了提到路径数据来自@krzysiej 链接到下面的svg。不确定该 svg 来自哪里。
@meetamit 我如何扩大线段的数量（例如，让弧线超过 5 条弧线？）你从哪里获得 line 命令的数据？
@BartVanRemortele 路径数据来自svg that krzysiej linked to below。不确定该 svg 来自哪里。要添加弧线，您需要使用 Illustrator 或 Inkscape 打开 SVG，在此处对其进行修改，然后再次将其另存为 SVG，并从该输出中提取路径数据。或者，您也许可以使用椭圆几何来计算和导出该路径，但我不确定它的可行性。

【解决方案2】：

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

【讨论】：

作为节省流量的选项，我建议只使用两张图片：一张完全满，一张完全空。它们应放置在相同的绝对位置。并且 full 图像应该被容器剪辑。容器大小由 javascript 控制...但通常我认为方法是正确的，因为 d3 不适用于此类东西

【解决方案3】：

如果您想模仿 duolingo 进度图像，您只需使用自己的图像复制他们的解决方案即可。他们使用精灵作为这个：http://d7mj4aqfscim2.cloudfront.net/images/skill-strength-sprite2.svg 而不是 d3.js 方法。这将为您节省大量时间和精力。

【讨论】：