我是D3新手并且通常编码。我已经制作了一个堆叠的条形图，梳理了来自网络的各种代码示例。我添加了一个在悬停时显示的工具提示，但它显示了每个条形图中堆叠的所有4个值的值。我想更改它，以便它只显示正在悬停的栏的特定部分的值 - 例如，当您悬停在例如2016年第一季度显示员工兼职的栏的部分时，它只显示一个价值，而不是该季度每种就业类型的价值。我已经尝试调整此行中的代码：
html（（d.data.month）+“
”+（d.data.employeesfulltime）+“
”+（d.data.employeesparttime）+“
”+ （d.data.selfemployedfulltime）+“
”+（d.data.selfemployedparttime））;
}）
但无法弄清楚如何更改它，以便每个季度只显示一个值的值，具体取决于在不破坏整个图表的情况下正在徘徊的内容。
非常感谢任何帮助 - 谢谢！
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="500" height="450"></svg>
<style>
.title {
font: 15px sans-serif;
}
.legend {
font: 10px sans-serif;
}
.axis {
fill: none;
stroke: #D3D3D3;
shape-rendering: crispEdges;
}
.axis path, line {
fill: none;
stroke: #D3D3D3;
shape-rendering: crispEdges;
}
.centerline {
display: none;
}
.g-num:hover {
fill: orange;
}
.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
font-family: 'Proxima-Nova', sans-serif;
background: none repeat scroll 0 0 #ffffff;
line-height: 1;
font-size: 10px;
padding: 12px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
border-radius: 2px;
text-align: center;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 10, right: 20, bottom: 10, left: 40};
var width = 500 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
var svgContainer = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var data = [
{month:"Q1 '08", employeesfulltime: 0, employeesparttime: 0,
selfemployedfulltime:0, selfemployedparttime:0,},
{month:"Q2 '08", employeesfulltime: 0, employeesparttime: 0,
selfemployedfulltime:0, selfemployedparttime:0,},
{month:"Q3 '08", employeesfulltime: -6777, employeesparttime: 51501,
selfemployedfulltime:16050, selfemployedparttime:-32449,},
{month:"Q4 '08", employeesfulltime: -96761, employeesparttime: 81769,
selfemployedfulltime:-1062, selfemployedparttime:-5506},
{month:"Q1 '09", employeesfulltime: -309785, employeesparttime: 122849,
selfemployedfulltime:19145, selfemployedparttime:-9577},
{month:"Q2 '09", employeesfulltime: -551303, employeesparttime:72870,
selfemployedfulltime:-30054, selfemployedparttime:38568},
{month:"Q3 '09", employeesfulltime: -670405, employeesparttime:150698 ,
selfemployedfulltime:4329, selfemployedparttime:42839 },
{month:"Q4 '09", employeesfulltime: -722566, employeesparttime:188715,
selfemployedfulltime:18484, selfemployedparttime:59652 },
{month:"Q1 '10", employeesfulltime: -857511, employeesparttime: 180270 ,
selfemployedfulltime:41246, selfemployedparttime:78834},
{month:"Q2 '10", employeesfulltime:-788732, employeesparttime:286291,
selfemployedfulltime:29292, selfemployedparttime:85782 },
{month:"Q3 '10", employeesfulltime: -809966, employeesparttime: 394568,
selfemployedfulltime:91558, selfemployedparttime:119911 },
{month:"Q4 '10", employeesfulltime: -767250, employeesparttime:343597,
selfemployedfulltime:38972, selfemployedparttime:135368},
{month:"Q1 '11", employeesfulltime: -597501, employeesparttime: 310817,
selfemployedfulltime:-15309, selfemployedparttime:164306},
{month:"Q2 '11", employeesfulltime: -577162, employeesparttime: 302685,
selfemployedfulltime:7145, selfemployedparttime:166872},
{month:"Q3 '11", employeesfulltime: -720538, employeesparttime:166016,
selfemployedfulltime:80965, selfemployedparttime:206414 },
{month:"Q4 '11", employeesfulltime: -783933, employeesparttime: 281013,
selfemployedfulltime:90085, selfemployedparttime:190036},
{month:"Q1 '12", employeesfulltime: -782690, employeesparttime:310385,
selfemployedfulltime:93579, selfemployedparttime:257762},
{month:"Q2 '12", employeesfulltime: -699356, employeesparttime: 358013,
selfemployedfulltime:136651, selfemployedparttime:253744},
{month:"Q3 '12", employeesfulltime: -649809, employeesparttime:383590,
selfemployedfulltime:117944, selfemployedparttime:280489},
{month:"Q4 '12", employeesfulltime: -515492, employeesparttime: 362100,
selfemployedfulltime:148464, selfemployedparttime:273576},
{month:"Q1 '13", employeesfulltime: -482007, employeesparttime:361642,
selfemployedfulltime:117686, selfemployedparttime:231430},
{month:"Q2 '13", employeesfulltime: -423430, employeesparttime: 366980,
selfemployedfulltime:114520, selfemployedparttime:247586},
{month:"Q3 '13", employeesfulltime: -320157, employeesparttime:378434,
selfemployedfulltime:167346, selfemployedparttime:243414 },
{month:"Q4 '13", employeesfulltime: -243715, employeesparttime: 336727,
selfemployedfulltime:291825, selfemployedparttime:296264},
{month:"Q1 '14", employeesfulltime: -185351, employeesparttime:376992,
selfemployedfulltime:371302, selfemployedparttime:370939},
{month:"Q2 '14", employeesfulltime: -31827, employeesparttime: 372880,
selfemployedfulltime:365482, selfemployedparttime:406676},
{month:"Q3 '14", employeesfulltime: 129625, employeesparttime:406338,
selfemployedfulltime:360465, selfemployedparttime:337240},
{month:"Q4 '14", employeesfulltime: 252208, employeesparttime: 440130,
selfemployedfulltime:307835, selfemployedparttime:371345},
{month:"Q1 '15", employeesfulltime: 390796, employeesparttime:509528,
selfemployedfulltime:303717, selfemployedparttime:381675},
{month:"Q2 '15", employeesfulltime: 431678, employeesparttime: 441827,
selfemployedfulltime:299409, selfemployedparttime:385673},
{month:"Q3 '15", employeesfulltime: 481269, employeesparttime:544872,
selfemployedfulltime:327446, selfemployedparttime:414819},
{month:"Q4 '15", employeesfulltime: 607865, employeesparttime: 525241,
selfemployedfulltime:398944, selfemployedparttime:442504},
{month:"Q1 '16", employeesfulltime: 581538, employeesparttime:565479,
selfemployedfulltime:436068, selfemployedparttime:432070},
{month:"Q2 '16", employeesfulltime: 642936, employeesparttime: 586587,
selfemployedfulltime:498349, selfemployedparttime:449921},
{month:"Q3 '16", employeesfulltime: 672094, employeesparttime:609383,
selfemployedfulltime:499016, selfemployedparttime:451853 },
{month:"Q4 '16", employeesfulltime:695133 , employeesparttime:
598618, selfemployedfulltime:516310, selfemployedparttime:38568,
other:446401},
{month:"Q1 '17", employeesfulltime: 891547, employeesparttime:537917,
selfemployedfulltime:517225, selfemployedparttime:432854}
];
var series = d3.stack()
.keys(["employeesfulltime", "employeesparttime", "selfemployedfulltime",
"selfemployedparttime"])
.offset(d3.stackOffsetDiverging)
(data);
var labels = ["Employed full-time", "Employed part-time", "Self-employed
full-time", "Self-employed part-time"];
var svg = d3.select("svg"),
margin = {top: 20, right: 30, bottom: 30, left: 60},
width = +svg.attr("width"),
height = +svg.attr("height");
var x = d3.scaleBand()
.domain(data.map(function(d) { return d.month; }))
.rangeRound([margin.left, width - margin.right])
.padding(0.1)
var y = d3.scaleLinear()
.domain([d3.min(series, stackMin), d3.max(series, stackMax)])
.rangeRound([height - margin.bottom, margin.top]);
var center = d3.scaleLinear()
.range([0, width]);
var centerLine = d3.axisTop(center).ticks(0);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", ]);
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
svg.append("g")
.selectAll("g")
.data(series)
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("class", "g-num")
.attr("width", x.bandwidth)
.attr("x", function(d) { return x(d.data.month); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.on("mousemove", function(d){
tooltip
.style("left", d3.event.pageX - 50 + "px")
.style("top", d3.event.pageY - 70 + "px")
.style("display", "inline-block")
.html((d.data.month) + "<br>" +
(d.data.employeesfulltime)+ "<br>"+ (d.data.employeesparttime)+ "<br>"+
(d.data.selfemployedfulltime)+ "<br>"+ (d.data.selfemployedparttime));
})
.on("mouseout", function(d){ tooltip.style("display",
"none");});
svg.append("g")
.attr("transform", "translate(0," + (height - margin.top) + ")")
.attr("class", "x axis")
.call(d3.axisBottom(x)
.tickValues(x.domain().filter(function(d,i){ return !(i%4)}))
.ticks(10))
.selectAll("text")
.attr("y", 4)
.attr("x", 4)
.attr("dy", ".35em")
.attr("transform", "rotate(25)")
.style("text-anchor", "start");
svg.append("g")
.attr("class", "centerline")
.attr("transform", "translate(0," + y(0) + ")")
.call(centerLine);
svg.append("g")
.attr("transform", "translate(" + margin.left + ",0)")
.attr("class", "y axis")
.call(d3.axisLeft(y));
function stackMin(serie) {
return d3.min(serie, function(d) { return d[0]; });
}
function stackMax(serie) {
return d3.max(serie, function(d) { return d[1]; });
}
var legend = svg.selectAll('.legend')
.data(z.domain())
.enter()
.append('g')
.attr('class', 'legend')
legend.append("rect")
.attr("x", 70)
.attr("y", function(d, i) { return i * 25 + 100 })
.attr("width", 18)
.attr("height", 18)
.style("fill", z );
legend.append("text")
.attr("x", 100)
.attr("y", function(d, i) { return i * 25 + 110; })
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) { return labels[i]; });
</script>
</body>
</html>