Question

我建立了一组甜甜圈图，需要添加一个唯一的类名，以便我可以将它们放置在页面上。

代码如下：

    var data = [{
    "site": "hmi",
        "filled": 10,
        "capacity": 100
}, {
    "site": "poplar",
        "filled": 25,
        "capacity": 100
}, {
    "site": "cox",
        "filled": 50,
        "capacity": 100
}, {
    "site": "masonville",
        "filled": 75,
        "capacity": 100
}];

    var width = 200,
    height = 130,
    twoPi = 2 * Math.PI;

    var arc = d3.arc()
    .innerRadius(42.5)
    .outerRadius(50)
    .startAngle(0);

    var svg = d3.select("body").selectAll("svg")
    .data(data)
    .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "donut") 
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    svg.selectAll("svg")
svg.append("path")
    .datum({endAngle: twoPi})
    .style("fill", "#e6e6e6")
    .attr("d", arc);

    svg.selectAll("svg")
svg.append("path")
    .attr("d", arc.endAngle(function (d) {return (twoPi * (1 - ((d.capacity - d.filled) / d.capacity)));}))
    .style("fill", "orange");

    svg.append("text")
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function (d) {return d.site;});

.total {
    font: 14px sans-serif;
    font-weight: bold;
}
.label {
    font: 18px sans-serif;
    font-weight: bold;
    fill: #c5c5c5;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

Link to CodePen Code

Answer 1

创建图时，可以使用.attr标记向其中添加一个id元素，以后可以通过jquery或直接dom操作对其进行操作。

var svg = d3.select("body").selectAll("svg")
    .data(data)
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "donut") 
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.attr("id", 'thing one');

Answer 2

您可以根据所附的svg字段或序列号（查看注释行）为id赋予site。

我删除了svg.selectAll("svg")行，因为它们什么也不做。

要绘制完整的圆，您不必使用datum()，只需用所需的基准调用圆弧，除非出于某种原因需要将基准附加到路径上。

var data = [{
    "site": "hmi",
        "filled": 10,
        "capacity": 100
}, {
    "site": "poplar",
        "filled": 25,
        "capacity": 100
}, {
    "site": "cox",
        "filled": 50,
        "capacity": 100
}, {
    "site": "masonville",
        "filled": 75,
        "capacity": 100
}];

    var width = 200,
    height = 130,
    twoPi = 2 * Math.PI;

    var arc = d3.arc()
    .innerRadius(42.5)
    .outerRadius(50)
    .startAngle(0);

    var svg = d3.select("body").selectAll("svg")
    .data(data)
    .enter()
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", function (d) { return "donut" + " svg_" + d.site; } ) 
    //.attr("class", function (d, i) { return "donut" + " svg_" + i; } )
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

svg.append("path")
    .style("fill", "#e6e6e6")
    .attr("d", arc({endAngle: twoPi}));

svg.append("path")
    .attr("d", arc.endAngle(function (d) {return (twoPi * (1 - ((d.capacity - d.filled) / d.capacity)));}))
    .style("fill", "orange");

    svg.append("text")
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function (d) {return d.site;});

.total {
    font: 14px sans-serif;
    font-weight: bold;
}
.label {
    font: 18px sans-serif;
    font-weight: bold;
    fill: #c5c5c5;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

修改

将其从唯一ID更改为标题要求的唯一类。

D3多个甜甜圈。添加唯一的类名

2 个答案: