我想要实现一个像渐变的弧,表示5级(见图).我的数据只有一个1-5之间的整数值.现在可以忽略中间的图标.有没有可能在d3中实现这样的东西？我找不到任何例子.此外,我尝试了一个切断馅饼(甜甜圈)图表方法,但我不能使增长的弧…我会感谢任何帮助！感谢那.
解决方法
您可以使用d3,而不依赖于外部图像,SVG精灵或DOM中的任何内容 – 只是d3.js.
这是一个working fiddle.实现如下.
而且,这是一个more advanced小提琴,动画剪辑路径在不断增长的弧线.查看its predecessor看看面膜看起来没有剪裁.
首先,您需要将图形表示为与d3绑定的数据数组.具体来说,您需要一个颜色和“line”命令(您分配给d的字符串,如< path d =“...”>>这样的东西：
var segmentData = [
{ color:"#ED6000",cmd:"M42.6,115.3c5.2,1.5,11,2.4,16.8,2.4c1.1,2.7,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; });
这只是创建图形,但不会基于整数值进行颜色化.为此,您可以定义更新功能：
function update(value) {
segments
.transition()
.attr("fill",function(d,i) {
return i < value ? d.color : "#ccc";
})
}
呼叫更新(4)将使除最后一个段之外的所有内容变色.调用更新(0)颜色无(留下所有的灰色).
在小提琴中,还有一个tick()函数,它在setTimeout的基础上调用了一个新的值,但这仅仅是为了演示.
最后,如果你愿意,你可以包装所有的代码,并通过遵循[本文]的建议创建一个可重用的组件(http://bost.ocks.org/mike/chart/)
