这个圆图可以用d3.js制作

Question

我想用d3.js进行数据可视化。 我想知道是否可以制作这样的产品？ ：

数据如下：A（实际数字）：25％，B（目标数字）：32％

Answer 1

是的！你可以使用这样的d3饼图布局：

我假设你有一个数据集，就像你在问题中解释的那样：

data = [{
    "label": "Actual",
        "percent": 25
}, {
    "label": "Target",
        "percent": 75
}]

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["orange", "gray"]);

var actualarc = d3.svg.arc()
    .outerRadius(radius - 80)
    .innerRadius(radius - 10);

var targetarc = d3.svg.arc()
    .outerRadius(radius - 80)
    .innerRadius(radius - 70);

var labelarc = d3.svg.arc()
    .outerRadius(radius + 70)
    .innerRadius(radius);

var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) {
    return d.percent;
});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");



data = [{
    "label": "Actual",
        "percent": 25
}, {
    "label": "Target",
        "percent": 75
}]

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", function (d) {
    console.log(d)
    if (d.data.label == "Actual") {
        console.log("actual")
        return actualarc(d);

    } else {
        console.log("target")
        return targetarc(d);
    }
})
    .style("fill", function (d) {
    return color(d.data.label);
});

g.append("text")
    .attr("transform", function (d) {
    return "translate(" + labelarc.centroid(d) + ")";
})
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .style("fill", function (d) {
    return color(d.data.label);
})
    .text(function (d) {
    return d.data.percent + "%";
});

body {
    font: 10px sans-serif;
}
.arc path {
    stroke: #fff;
}
text {
    font-size:40px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

希望这有帮助！