JS Gauge增长弧度

Question

有没有人知道JavaScript图表库能够绘制这样的标尺：

我已经看过Highcharts，Kendo UI和FusionCharts，但是我找不到任何弧形非恒定宽度的样本......但这也可能是因为我没有＆＃39甚至不知道要搜索什么。

我发现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();
}