如何在D3JS中创建车速表？

Question

我是D3的新手，必须创建

这样的速度表

https://forums.databricks.com/storage/attachments/993-capture.png

到目前为止，我能够创建半圆设计，但无法创建相同的指示器以及指示器在弧线上的重叠。 如何做到这一点？

我的代码是：

    var svg = d3.select("#speedometer")
            .append("svg:svg")
            .attr("width", 400)
            .attr("height", 400);


    var gauge = iopctrl.arcslider()
            .radius(120)
            .events(false)
            .indicator(iopctrl.defaultGaugeIndicator);
    gauge.axis().orient("in")
            .normalize(true)
            .ticks(10)
            .tickSubdivide(0)
            .tickSize(10, 8, 10).tickValues([20,30,40,50,60,70,80,90])
            .tickPadding(3)
            .scale(d3.scale.linear()
                    .domain([10, 100])
                    .range([-Math.PI / 2, Math.PI / 2]));    

    svg.append("g")
            .attr("class", "gauge")
            .call(gauge);


    gauge.value(76); 

Answer 1

d3.js中有很多用于速度计的示例。

请看看

speedometer

d3 gauge