JS Gauge 弧度增大

Question

有没有人知道一个 JavaScript 图表库，它能够像这样绘制一个仪表：

我已经查看了 Highcharts、Kendo UI 和 FusionCharts，但我找不到任何具有非恒定圆弧宽度的示例……但这也可能是因为我什至不知道该做什么准确搜索。

我发现 this post 似乎朝着正确的方向发展，但如果有现成的解决方案，我宁愿不必自己绘制 SVG。

Answer 1

以防其他人需要类似的东西，我最终使用 D3 自己构建了它。完整的动画样本可在http://jsfiddle.net/0288wscf/11/获得。

var domain = [1, 100];

var angleScale = d3.scale.linear().domain(domain).range([minAngle, maxAngle]);
var radiusScale = d3.scale.linear().domain(domain).range([radius - minWidth, radius - maxWidth]);
var colorScale = d3.scale.linear().domain(domain).range([minColor, maxColor]);

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

var gauge = svg.append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")")

var arc = d3.svg.arc()
    .innerRadius(radiusScale)
    .outerRadius(radius)
    .startAngle(angleScale)
    .endAngle(angleScale);

function update(n) {    
    var ticks = gauge.selectAll(".tick").data(d3.range(1, n), function(d) { return d; });

    ticks.enter()
         .append("path")
         .attr("class", "tick")
         .attr("stroke", colorScale)            
         .attr("d", arc)
         .attr("stroke-width", tickThickness)
         .attr("opacity", 0)
         .transition()
         .delay(enterDuration)
         .attr("opacity", 1);

    ticks.exit()
         .transition()
         .delay(exitDuration)
         .remove();
}