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

Question

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

Answer 1

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

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

首先,您需要将图形表示为与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)无颜色(将所有颜色都保持为灰色).

在小提琴中,还有一个tick()函数update在setTimeout的基础上使用新值调用,但这只是用于演示.

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