【发布时间】：2017-10-20 16:17:14
【问题描述】：
在尝试使用 d3js 为多环甜甜圈图中的每个环使用工具提示时，将鼠标悬停在环上时，它只显示第一个孩子的值。下面是显示环和工具提示的代码。为了在悬停时获得所有正确的项目，我会做什么。如何遍历 json 以获得正确的工具提示。
var dataset = [{
"name": "Population Quater",
"code": "POP_QUATER",
"parent": "POP_BY_QUAT",
"children": [{
"name": "POP_CYQ1",
"code": "POP_CYQ1",
"parent": "POP_QUATER",
"value": "6772",
"label": "CYQ1",
"children": []
}, {
"name": "POP_CYQ2",
"code": "POP_CYQ2",
"parent": "POP_QUATER",
"value": "6716",
"label": "CYQ2",
"children": []
}, {
"name": "POP_CYQ3",
"code": "POP_CYQ3",
"parent": "POP_QUATER",
"value": "6714",
"label": "CYQ3",
"children": []
}, {
"name": "POP_CYQ4",
"code": "POP_CYQ4",
"parent": "POP_QUATER",
"value": "6703",
"label": "CYQ4",
"children": []
}, {
"name": "POP_LYQ1",
"code": "POP_LYQ1",
"parent": "POP_QUATER",
"value": "6721",
"label": "LYQ1",
"children": []
}, {
"name": "POP_LYQ2",
"code": "POP_LYQ2",
"parent": "POP_QUATER",
"value": "6671",
"label": "LYQ2",
"children": []
}, {
"name": "POP_LYQ3",
"code": "POP_LYQ3",
"parent": "POP_QUATER",
"value": "6708",
"label": "LYQ3",
"children": []
}, {
"name": "POP_LYQ4",
"code": "POP_LYQ4",
"parent": "POP_QUATER",
"value": "6734",
"label": "LYQ4",
"children": []
}]
}, {
"name": "Transient Pop",
"code": "TRANSIENT_POP",
"parent": "POP_BY_QUAT",
"label": "Transient Pop",
"children": [{
"name": "TRANSIENT_LYQ1",
"code": "TRANSIENT_LYQ1",
"parent": "TRANSIENT_POP",
"value": "54",
"label": "LYQ1",
"children": []
}, {
"name": "TRANSIENT_LYQ2",
"code": "TRANSIENT_LYQ2",
"parent": "TRANSIENT_POP",
"value": "86",
"label": "LYQ2",
"children": []
}, {
"name": "TRANSIENT_LYQ3",
"code": "TRANSIENT_LYQ3",
"parent": "TRANSIENT_POP",
"value": "219",
"label": "LYQ3",
"children": []
}, {
"name": "TRANSIENT_LYQ4",
"code": "TRANSIENT_LYQ4",
"parent": "TRANSIENT_POP",
"value": "191",
"label": "LYQ4",
"children": []
}, {
"name": "TRANSIENT_CYQ1",
"code": "TRANSIENT_CYQ1",
"parent": "TRANSIENT_POP",
"value": "52",
"label": "CYQ1",
"children": []
}, {
"name": "TRANSIENT_CYQ2",
"code": "TRANSIENT_CYQ2",
"parent": "TRANSIENT_POP",
"value": "91",
"label": "CYQ2",
"children": []
}, {
"name": "TRANSIENT_CYQ3",
"code": "TRANSIENT_CYQ3",
"parent": "TRANSIENT_POP",
"value": "222",
"label": "CYQ3",
"children": []
}, {
"name": "TRANSIENT_CYQ4",
"code": "TRANSIENT_CYQ4",
"parent": "TRANSIENT_POP",
"value": "186",
"label": "CYQ4",
"children": []
}]
}, {
"name": "Seasonal Pop",
"code": "SEASONAL_POP",
"parent": "POP_BY_QUAT",
"label": "Seasonal Pop",
"children": [{
"name": "SEASONAL_LYQ1",
"code": "SEASONAL_LYQ1",
"parent": "SEASONAL_POP",
"value": "2",
"label": "LYQ1",
"children": []
}, {
"name": "SEASONAL_LYQ2",
"code": "SEASONAL_LYQ2",
"parent": "SEASONAL_POP",
"value": "24",
"label": "LYQ2",
"children": []
}, {
"name": "SEASONAL_LYQ3",
"code": "SEASONAL_LYQ3",
"parent": "SEASONAL_POP",
"value": "152",
"label": "LYQ3",
"children": []
}, {
"name": "SEASONAL_LYQ4",
"code": "SEASONAL_LYQ4",
"parent": "SEASONAL_POP",
"value": "55",
"label": "LYQ4",
"children": []
}, {
"name": "SEASONAL_CYQ1",
"code": "SEASONAL_CYQ1",
"parent": "SEASONAL_POP",
"value": "2",
"label": "CYQ1",
"children": []
}, {
"name": "SEASONAL_CYQ2",
"code": "SEASONAL_CYQ2",
"parent": "SEASONAL_POP",
"value": "22",
"label": "CYQ2",
"children": []
}, {
"name": "SEASONAL_CYQ3",
"code": "SEASONAL_CYQ3",
"parent": "SEASONAL_POP",
"value": "161",
"label": "CYQ3",
"children": []
}, {
"name": "SEASONAL_CYQ4",
"code": "SEASONAL_CYQ4",
"parent": "SEASONAL_POP",
"value": "55",
"label": "CYQ4",
"children": []
}]
}];
var width = 460,
height = 300,
cwidth = 25;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var pie = d3.pie()
.sort(null).value(function(d) {
return d.value; //since score is the parameter for the pie
});
var arc = d3.arc();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("class", "arc").on("mouseover", function() {
tooltip.style("display", null);
})
.on("mouseout", function() {
tooltip.style("display", "none");
})
.on("mousemove", function(d, i) {
tooltip.transition().duration(200)
.style("opacity", 0.9);
tooltip.select("div").html(d.children[i].name + ":" + " <strong>" + d.children[i].value + "</strong>")
.style("position", "fixed")
.style("text-align", "center")
.style("width", "120px")
.style("height", "45px")
.style("padding", "2px")
.style("font", "12px sans-serif")
.style("background", "lightsteelblue")
.style("border", "0px")
.style("border-radius", "8px")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
});
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0.5);
tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "#ffffff")
.style("opacity", 0.5);
tooltip.append("div")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "1.5em")
.attr("font-weight", "bold");
var path = gs.selectAll("path")
.data(function(d, i) {
return pie(d.children).map(function(payload) {
return {
payload: payload,
parentIndex: i
}
})
})
.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", function(d, i, j) {
return arc.innerRadius(10 + cwidth * d.parentIndex).outerRadius(cwidth * (d.parentIndex + 1))(d.payload);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>【问题讨论】：
-
您能否举例说明正确的工具提示是什么样的？
-
如果您看到它为每个环提供相同的值和名称。外圈只显示
SEASONAL_LYQ3:152。它应该是 SEASONAL_LY 不同的季度，因为数据集中每个季度都有不同的值@StevenBlack -
看起来我在每个环上都是一样的......我正在调查。也许我们可以使用
this或者您必须将所有内容嵌入onmouseover -
我认为我们将不得不使用层次结构函数
var data = d3.hierarchy(dataset, function(d) { console.log(d); return d["children"]; });我正在用笔处理它