D3JS填料量表

Question

大多数仪表图表都是甜甜圈形状，但我正在寻找类似于here的填充条动态图。

我不确定是否有任何d3示例可以动态引用动态值，例如我在this JSfiddle example中制作的鼠标位置，其中圆环形状测量仪与我在{上找到的代码一起使用{3}}有一些修改的例子：

var gauges = [];

var w = window.innerWidth;
var h = window.innerHeight;

function createGauge(name, label, min, max)
{
    var config = 
    {
        size: 120,
        label: label,
        min: undefined != min ? min : 0,
        max: undefined != max ? max : 100,
        minorTicks: 5
    }

    gauges[name] = new Gauge(name + "GaugeContainer", config);
    gauges[name].render();
}

function createGauges()
{
    createGauge("xMouse", "X - Mouse");
    createGauge("yMouse", "Y - Mouse");
}

function initialize()
{
    createGauges();
    $( document ).on( "mousemove", function( event ) {
        gauges["xMouse"].redraw(100*event.pageX/w);
        gauges["yMouse"].redraw(100*event.pageY/h);
    });
}

我知道还有其他SVG，例如矩形，但这是制作“填充条”规格的最佳方法吗？

http://bl.ocks.org/tomerd/1499279