1
Я пытаюсь построить кольцевую диаграмму, используя d3, на основе этих двух примеров:Невозможно представить себе метку в кольцевой диаграмме - D3
http://bl.ocks.org/mbostock/3887193 http://jsfiddle.net/ragingsquirrel3/qkHK6/
Однако, я не могу видеть этикетки данных. Здесь можно найти минимальный пример:
https://jsfiddle.net/g6vyk7t1/
Я задаюсь вопросом, что я пропускаю.
jsonArr = [{
"label": "13",
"value": 13.17435599605977
}, {
"label": "11",
"value": 10.599857294624265
}, {
"label": "16",
"value": 16.06213289774901
}, {
"label": "14",
"value": 13.511044375821099
}, {
"label": "11",
"value": 10.664713102997277
}, {
"label": "15",
"value": 14.563786284297807
}, {
"label": "16",
"value": 16.00697524769618
}, {
"label": "14",
"value": 14.359596161811186
}, {
"label": "16",
"value": 16.30948044715333
}, {
"label": "12",
"value": 11.667434335739946
}, {
"label": "9",
"value": 8.906828269284498
}, {
"label": "12",
"value": 12.184727712259644
}, {
"label": "29",
"value": 28.91564471677896
}, {
"label": "15",
"value": 14.794540561843725
}, {
"label": "7",
"value": 6.75160611562344
}, {
"label": "15",
"value": 15.200055092907874
}, {
"label": "41",
"value": 41.432547293738104
}, {
"label": "12",
"value": 11.871964986439362
}]
var colorrange = [
"#7f3b08",
"#a50026",
"#d73027",
"#f46d43",
"#fdae61",
"#fee090",
"#ffffbf",
"#ffffff",
"#e0f3f8",
"#abd9e9",
"#74add1",
"#4575b4",
"#4575b4",
"#d8daeb",
"#b2abd2",
"#8073ac",
"#542788",
"#000000"
];
data = jsonArr;
var width = 300,
height = 300,
radius = Math.min(width, height)/2;
var color = d3.scale.ordinal()
.range(colorrange);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var svg = d3.select("#info").attr("align", "center").append("svg")
.attr("class", "piechart")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return color(i);
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.label;
});
Вот как работает макет. Вы предоставляете нужные данные, а затем предоставляете функцию доступа, чтобы вытащить это значение из ваших данных: function (d) {return d.label;} Однако при доступе к контенту узла, построенному по макету, значение равно данные, специфичные для дуги, и ваши данные инкапсулируются в свойство данных этого объекта (где ваша метка, по-видимому, находится). –