d3：如何为堆积面积图聚焦单独的工具提示？
Posted
技术标签:
【中文标题】d3：如何为堆积面积图聚焦单独的工具提示？【英文标题】：d3: how to focus separate tooltips for stacked area chart? 【发布时间】：2022-01-15 10:09:39 【问题描述】：我正在使用d3.js 创建一个堆积面积图。现在我无法弄清楚 (mousemove) 如何将单独的工具提示集中在相应的图表曲线上。
我正在尝试实现this，但对于堆积面积图。
我在这里创建了一个我的进度沙盒：https://codesandbox.io/s/recursing-carlos-3t0lg
相关代码：
function mouseMove()
d3.event.preventDefault();
const mouse = d3.mouse(d3.event.target);
const [xCoord, yCoord] = mouse;
const mouseDate = x.invert(xCoord);
const mouseDateSnap = d3.timeDay.floor(mouseDate);
const bisectDate = d3.bisector((d) => d.date).left;
const xIndex = bisectDate(data, mouseDateSnap, 0);
const mouseHours = data[xIndex].hours;
let demandHours =
data[xIndex].resourceType === "DMND" ? data[xIndex].hours : "";
let supplyHours =
data[xIndex].resourceType === "SPLY" ? data[xIndex].hours : "";
if (x(mouseDateSnap) <= 0) return;
svg
.selectAll(".hoverLine")
.attr("x1", x(mouseDateSnap))
.attr("y1", margin.top)
.attr("x2", x(mouseDateSnap))
.attr("y2", height - margin.bottom)
.attr("stroke", "#69b3a2")
.attr("fill", "#cce5df");
svg
.select(".hoverPoint1")
.attr("cx", x(mouseDateSnap))
.attr("cy", y(supplyHours))
.attr("r", "7")
.attr("fill", "green");
svg
.select(".hoverPoint2")
.attr("cx", x(mouseDateSnap))
.attr("cy", y(demandHours))
.attr("r", "7")
.attr("fill", "yellow");
const isLessThanHalf = xIndex > data.length / 2;
const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
const hoverTextAnchor = isLessThanHalf ? "end" : "start";
svg
.selectAll(".hoverText")
.attr("x", x(mouseDateSnap))
.attr("y", y(mouseHours))
.attr("dx", hoverTextX)
.attr("dy", "-1.25em")
.style("text-anchor", hoverTextAnchor)
.text(
data[xIndex].resourceType === "DMND"
? demandHours + "sec"
: supplyHours + "sec"
);
svg.append("line").classed("hoverLine", true);
svg.append("circle").classed("hoverPoint1", true);
svg.append("circle").classed("hoverPoint2", true);
svg.append("text").classed("hoverText", true);
svg
.append("rect")
.attr("fill", "transparent")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
svg.on("mousemove", mouseMove);
在上面的代码中，我使用选择 hoverPoint1（显示 SPLY 小时数）和 hoverPoint2（显示 DMND 小时数）创建了 2 个单独的工具提示
预期：
在(mousemove) 上，绿色圆圈应沿蓝色绘制区域的曲线移动，同时黄色圆圈应沿灰色绘制区域的曲线移动。 （请将此视为显示单个区域工具提示https://observablehq.com/@elishaterada/simple-area-chart-with-tooltip 的示例）
谢谢！
function stackedAreaPlot(data)
// set the dimensions and margins of the graph
const margin =
top: 10,
right: 30,
bottom: 30,
left: 60
,
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3
.select("#stackedAreaPlot")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate($margin.left, $margin.top)`);
// Add X axis --> it is a date format
const x = d3
.scaleTime()
.domain(d3.extent(data, (d: any) => new Date(d.date)))
.range([0, width]);
svg
.append("g")
.attr("transform", `translate(0, $height)`)
.call(d3.axisBottom(x));
// Add Y axis
const y = d3.scaleLinear().domain([0, 2000]).range([height, 0]);
svg.append("g").call(d3.axisLeft(y));
let sumstat: any = d3
.nest()
.key((d: any) =>
return d.date;
)
.entries(data);
// stacked groups
const myGroups = ["DMND", "SPLY"];
const stackedData: any = d3
.stack()
// .keys(myGroup)
.keys(myGroups)
.value((data: any, key: any) =>
return data &&
data.values &&
data.values.find((d) => d.resourceType === key) ?
+data.values.find((d) => d.resourceType === key).hours :
null;
)(sumstat);
const color = d3
.scaleOrdinal()
.domain(myGroups)
.range(["#a9b4bc", "#4b6f93"]);
// Show the areas
svg
.selectAll("mylayers")
.data(stackedData)
.enter()
.append("path")
.style("fill", (d: any) => color(d.key))
.attr(
"d",
d3
.area()
.x(function(d: any)
return x(new Date(d.data.key));
)
.y0(function(d: any)
return y(+d[0]);
)
.y1(function(d: any)
return y(+d[1]);
)
);
// tooltip with hover point and line
function mouseMove()
d3.event.preventDefault();
const mouse = d3.mouse(d3.event.target);
const [xCoord, yCoord] = mouse;
const mouseDate = x.invert(xCoord);
const mouseDateSnap = d3.timeDay.floor(mouseDate);
const bisectDate = d3.bisector((d) => d.date).left;
const xIndex = bisectDate(data, mouseDateSnap, 0);
const mouseHours = data[xIndex].hours;
let demandHours =
data[xIndex].resourceType === "DMND" ? data[xIndex].hours : "";
let supplyHours =
data[xIndex].resourceType === "SPLY" ? data[xIndex].hours : "";
if (x(mouseDateSnap) <= 0) return;
svg
.selectAll(".hoverLine")
.attr("x1", x(mouseDateSnap))
.attr("y1", margin.top)
.attr("x2", x(mouseDateSnap))
.attr("y2", height - margin.bottom)
.attr("stroke", "#69b3a2")
.attr("fill", "#cce5df");
svg
.select(".hoverPoint1")
.attr("cx", x(mouseDateSnap))
.attr("cy", y(supplyHours))
.attr("r", "7")
.attr("fill", "green");
svg
.select(".hoverPoint2")
.attr("cx", x(mouseDateSnap))
.attr("cy", y(demandHours))
.attr("r", "7")
.attr("fill", "yellow");
const isLessThanHalf = xIndex > data.length / 2;
const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
const hoverTextAnchor = isLessThanHalf ? "end" : "start";
svg
.selectAll(".hoverText")
.attr("x", x(mouseDateSnap))
.attr("y", y(mouseHours))
.attr("dx", hoverTextX)
.attr("dy", "-1.25em")
.style("text-anchor", hoverTextAnchor)
.text(
data[xIndex].resourceType === "DMND" ?
demandHours + " hours" :
supplyHours + " hours"
);
svg.append("line").classed("hoverLine", true);
svg.append("circle").classed("hoverPoint1", true);
svg.append("circle").classed("hoverPoint2", true);
svg.append("text").classed("hoverText", true);
svg
.append("rect")
.attr("fill", "transparent")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
svg.on("mousemove", mouseMove);
var data = [
date: "2021-12-10T05:00:00.000Z",
hours: 388.5421,
resourceType: "SPLY"
,
date: "2021-12-11T05:00:00.000Z",
hours: 357.17214,
resourceType: "SPLY"
,
date: "2021-12-12T05:00:00.000Z",
hours: 194.80227,
resourceType: "SPLY"
,
date: "2021-12-12T05:00:00.000Z",
hours: 24.5,
resourceType: "DMND"
,
date: "2021-12-13T05:00:00.000Z",
hours: 466.68397,
resourceType: "SPLY"
,
date: "2021-12-13T05:00:00.000Z",
hours: 48,
resourceType: "DMND"
,
date: "2021-12-14T05:00:00.000Z",
hours: 591.11745,
resourceType: "SPLY"
,
date: "2021-12-14T05:00:00.000Z",
hours: 62.75,
resourceType: "DMND"
,
date: "2021-12-15T05:00:00.000Z",
hours: 631.64018,
resourceType: "SPLY"
,
date: "2021-12-15T05:00:00.000Z",
hours: 84.73,
resourceType: "DMND"
,
date: "2021-12-16T05:00:00.000Z",
hours: 175.7,
resourceType: "DMND"
,
date: "2021-12-16T05:00:00.000Z",
hours: 628.53835,
resourceType: "SPLY"
,
date: "2021-12-17T05:00:00.000Z",
hours: 240.24,
resourceType: "DMND"
,
date: "2021-12-17T05:00:00.000Z",
hours: 673.66929,
resourceType: "SPLY"
,
date: "2021-12-18T05:00:00.000Z",
hours: 256.68,
resourceType: "DMND"
,
date: "2021-12-18T05:00:00.000Z",
hours: 635.43202,
resourceType: "SPLY"
,
date: "2021-12-19T05:00:00.000Z",
hours: 634.73701,
resourceType: "SPLY"
,
date: "2021-12-19T05:00:00.000Z",
hours: 212.44,
resourceType: "DMND"
,
date: "2021-12-20T05:00:00.000Z",
hours: 604.94103,
resourceType: "SPLY"
,
date: "2021-12-20T05:00:00.000Z",
hours: 209.76,
resourceType: "DMND"
,
date: "2021-12-21T05:00:00.000Z",
hours: 618.83085,
resourceType: "SPLY"
,
date: "2021-12-21T05:00:00.000Z",
hours: 200.78,
resourceType: "DMND"
,
date: "2021-12-22T05:00:00.000Z",
hours: 580.31758,
resourceType: "SPLY"
,
date: "2021-12-22T05:00:00.000Z",
hours: 204.78,
resourceType: "DMND"
,
date: "2021-12-23T05:00:00.000Z",
hours: 231.15,
resourceType: "DMND"
,
date: "2021-12-23T05:00:00.000Z",
hours: 679.8791100000001,
resourceType: "SPLY"
,
date: "2021-12-24T05:00:00.000Z",
hours: 654.02485,
resourceType: "SPLY"
,
date: "2021-12-24T05:00:00.000Z",
hours: 281.28,
resourceType: "DMND"
];
stackedAreaPlot(data);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="stackedAreaPlot"></div>【问题讨论】：
如果您可以为您的代码创建一个minimal reproducible example，最好是在runnable stack snippet 中，这将非常有帮助。这意味着删除 TypeScript 和 Angular 逻辑并修剪任何不相关的内容。这样，我们可以更轻松地回答您的问题，您也更有可能得到一个好的答案！ 【参考方案1】：我认为您在几个设计决策上都自欺欺人了。第一个问题是您将mouseDateSnap（日期）与data[0].date（仍然是一个字符串）进行比较。你需要安排一个日期。
此外，通过查看堆叠数据，您可以确保始终拥有属于某个点的所有数据，用于所有轨迹。然后，您可以轻松绘制圆圈，还可以为两条迹线绘制工具提示，而不仅仅是一条。
通过使用d3.select().enter()，您可以使该功能适用于任意数量的跟踪，并且无需使用.hoverPoint1 和.hoverPoint2 逻辑。
最后，如果您将mouseDateSnap 与bisect 结合使用，您将在轴刻度处绘制点（很好），但y 值会关闭。它将匹配最近绘制点的 y 值。所以圆圈实际上看起来一点也不好看。
function stackedAreaPlot(data)
// set the dimensions and margins of the graph
const margin =
top: 10,
right: 30,
bottom: 30,
left: 60
,
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3
.select("#stackedAreaPlot")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate($margin.left, $margin.top)`);
// Add X axis --> it is a date format
const x = d3
.scaleTime()
.domain(d3.extent(data, (d: any) => new Date(d.date)))
.range([0, width]);
svg
.append("g")
.attr("transform", `translate(0, $height)`)
.call(d3.axisBottom(x));
// Add Y axis
const y = d3.scaleLinear().domain([0, 2000]).range([height, 0]);
svg.append("g").call(d3.axisLeft(y));
let sumstat: any = d3
.nest()
.key((d: any) =>
return d.date;
)
.entries(data);
// stacked groups
const myGroups = ["DMND", "SPLY"];
const stackedData: any = d3
.stack()
// .keys(myGroup)
.keys(myGroups)
.value((data: any, key: any) =>
return data &&
data.values &&
data.values.find((d) => d.resourceType === key) ?
+data.values.find((d) => d.resourceType === key).hours :
null;
)(sumstat);
const color = d3
.scaleOrdinal()
.domain(myGroups)
.range(["#a9b4bc", "#4b6f93"]);
// Show the areas
svg
.selectAll("mylayers")
.data(stackedData)
.enter()
.append("path")
.style("fill", (d: any) => color(d.key))
.attr(
"d",
d3
.area()
.x(function(d: any)
return x(new Date(d.data.key));
)
.y0(function(d: any)
return y(+d[0]);
)
.y1(function(d: any)
return y(+d[1]);
)
);
// tooltip with hover point and line
function mouseMove()
d3.event.preventDefault();
const mouse = d3.mouse(d3.event.target);
const [xCoord, yCoord] = mouse;
const mouseDate = x.invert(xCoord);
// Use `sumstat`, not `data`, to get the correct data object for all traces
const bisectDate = d3.bisector(d => new Date(d.key)).left;
const xIndex = bisectDate(sumstat, mouseDate);
// We get the key directly from xVal
const xVal = new Date(sumstat[xIndex].key);
if (x(xVal) <= 0) return;
svg
.selectAll(".hoverLine")
.attr("x1", x(xVal))
.attr("y1", y.range()[0])
.attr("x2", x(xVal))
.attr("y2", y.range()[1])
.attr("stroke", "#69b3a2")
.attr("fill", "#cce5df");
const isLessThanHalf = xIndex > sumstat.length / 2;
const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
const hoverTextAnchor = isLessThanHalf ? "end" : "start";
// Create a mapping of type (DMND/SPLY) to single and stacked Y values
const yVals =
DMND: color: "green" ,
SPLY: color: "yellow"
;
sumstat[xIndex].values.forEach((el) =>
// Get the single values from `sumstat`
yVals[el.resourceType].hours = el.hours;
);
stackedData.forEach((group) =>
// Get the cumulative values from `stackedData`
yVals[group.key].cumulative = group[xIndex][1];
);
let hoverPoints = svg
.selectAll(".hoverPoint")
.data(Object.values(yVals));
const newHoverPoints = hoverPoints
.enter()
.append("g")
.classed("hoverPoint", true);
newHoverPoints
.append("circle")
.attr("r", 7)
.attr("fill", d => d.color);
newHoverPoints
.append("text")
.attr("dy", "-1.25em");
newHoverPoints
.merge(hoverPoints)
.attr("transform", d => `translate($x(xVal), $y(d.cumulative))`)
.select("text")
.attr("dx", hoverTextX)
.style("text-anchor", hoverTextAnchor)
.text(d => `$d.hours || 0sec`);
svg.append("line").classed("hoverLine", true);
svg
.append("rect")
.attr("fill", "transparent")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
svg.on("mousemove", mouseMove);
var data = [
date: "2021-12-10T05:00:00.000Z",
hours: 388.5421,
resourceType: "SPLY"
,
date: "2021-12-11T05:00:00.000Z",
hours: 357.17214,
resourceType: "SPLY"
,
date: "2021-12-12T05:00:00.000Z",
hours: 194.80227,
resourceType: "SPLY"
,
date: "2021-12-12T05:00:00.000Z",
hours: 24.5,
resourceType: "DMND"
,
date: "2021-12-13T05:00:00.000Z",
hours: 466.68397,
resourceType: "SPLY"
,
date: "2021-12-13T05:00:00.000Z",
hours: 48,
resourceType: "DMND"
,
date: "2021-12-14T05:00:00.000Z",
hours: 591.11745,
resourceType: "SPLY"
,
date: "2021-12-14T05:00:00.000Z",
hours: 62.75,
resourceType: "DMND"
,
date: "2021-12-15T05:00:00.000Z",
hours: 631.64018,
resourceType: "SPLY"
,
date: "2021-12-15T05:00:00.000Z",
hours: 84.73,
resourceType: "DMND"
,
date: "2021-12-16T05:00:00.000Z",
hours: 175.7,
resourceType: "DMND"
,
date: "2021-12-16T05:00:00.000Z",
hours: 628.53835,
resourceType: "SPLY"
,
date: "2021-12-17T05:00:00.000Z",
hours: 240.24,
resourceType: "DMND"
,
date: "2021-12-17T05:00:00.000Z",
hours: 673.66929,
resourceType: "SPLY"
,
date: "2021-12-18T05:00:00.000Z",
hours: 256.68,
resourceType: "DMND"
,
date: "2021-12-18T05:00:00.000Z",
hours: 635.43202,
resourceType: "SPLY"
,
date: "2021-12-19T05:00:00.000Z",
hours: 634.73701,
resourceType: "SPLY"
,
date: "2021-12-19T05:00:00.000Z",
hours: 212.44,
resourceType: "DMND"
,
date: "2021-12-20T05:00:00.000Z",
hours: 604.94103,
resourceType: "SPLY"
,
date: "2021-12-20T05:00:00.000Z",
hours: 209.76,
resourceType: "DMND"
,
date: "2021-12-21T05:00:00.000Z",
hours: 618.83085,
resourceType: "SPLY"
,
date: "2021-12-21T05:00:00.000Z",
hours: 200.78,
resourceType: "DMND"
,
date: "2021-12-22T05:00:00.000Z",
hours: 580.31758,
resourceType: "SPLY"
,
date: "2021-12-22T05:00:00.000Z",
hours: 204.78,
resourceType: "DMND"
,
date: "2021-12-23T05:00:00.000Z",
hours: 231.15,
resourceType: "DMND"
,
date: "2021-12-23T05:00:00.000Z",
hours: 679.8791100000001,
resourceType: "SPLY"
,
date: "2021-12-24T05:00:00.000Z",
hours: 654.02485,
resourceType: "SPLY"
,
date: "2021-12-24T05:00:00.000Z",
hours: 281.28,
resourceType: "DMND"
];
stackedAreaPlot(data);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<div id="stackedAreaPlot"></div>【讨论】：
以上是关于d3：如何为堆积面积图聚焦单独的工具提示？的主要内容，如果未能解决你的问题，请参考以下文章