如何向 D3.js 子图添加工具提示
[英]How to add a tooltip to D3.js subplot
问题描述
我目前正在尝试在 d3.js 中创建一个“平面图”，我意识到这在 D3 语言中并不是真正的事情。 但是，我发现这个线程概述了如何完成任务。 从这篇文章中，我将折线图从垂直转换为水平，并在需要的地方添加了一些额外的填充元素。
现在我想为每个 plot 添加一个工具提示。 从使用其他代码片段来看，这似乎非常具有挑战性。 出于某种原因，我无法弄清楚如何将工具提示附加到每个单独的 plot。 关于我如何能够做到这一点的任何想法？
它目前的样子：
// Data and manipluation: const data = d3.range(25).map(i => ({ bib: Math.floor(i / 5) + 1, ratio: -1 + Math.random() * 5, run: [1, 2, 3, 4, 5][i % 5], run: [1, 2, 3, 4, 5][i % 5], name: ['metric1', 'metric2', 'metric3', 'metric4', 'metric5'][Math.floor(i / 5)] })); const grouped = d3.group(data,d=>d.bib); // Dimensions: const height = 800; const width = 700; const margin = { top: 10, left: 50, right: 50, bottom: 50 } const padding = 30; const doublePadding = padding * 2; const plotHeight = (height-doublePadding)/grouped.size - padding; const plotWidth = width-padding*2; // const plotWidth = (width-padding)/grouped.size - padding; // const plotHeight = height-padding*2; const svg = d3.select("#chart1").append("svg").attr("width", margin.left+width+margin.right).attr("height", margin.top+height+margin.bottom+(padding*grouped.size)); const g = svg.append("g").attr("transform","translate("+[margin.left,margin.top]+")"); //Scales: const xScale = d3.scaleLinear().domain(d3.extent(data, d => d.run)).range([0, plotWidth]); const yScale = d3.scaleLinear().domain(d3.extent(data, d => d.ratio)).range([plotHeight,0]); // Place plots: const plots = g.selectAll(null).data(grouped).enter().append("g").attr("transform", function(d,i) { return "translate("+[padding,i*(doublePadding+plotHeight)+padding]+")"; }) //Optional plot background: plots.append("rect").attr("width",plotWidth).attr("height",plotHeight).attr("fill","#ddd"); // Plot actual data plots.selectAll(null).data(d=>d[1]).enter().append("circle").attr("r", 4).attr("cy", d=>yScale(d.ratio)).attr("cx", d=>xScale(d.run)) // Plot line if needed: plots.append("path").attr("d", function(d) { return d3.line().x(d=>xScale(d.run)).y(d=>yScale(d.ratio)) (d[1]) }).attr("stroke", "#333").attr("stroke-width", 1).attr("fill","none") // Plot names if needed: plots.append("text").attr("x", plotWidth/2).attr("y", -10).text(function(d) { return d[1][0].name; }).attr("text-anchor","middle"); // Plot axes plots.append("g").attr("transform","translate("+[0,plotHeight]+")").call(d3.axisBottom(xScale).ticks(4)); plots.append("g").attr("transform","translate("+[-padding,0]+")").call(d3.axisLeft(yScale))
<head> <:-- Load d3.js --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/d3/6.6.1/d3.min.js"></script> </head> <body> <div class="graph-container"> <div id="chart1"></div> </div> </body>
1 个解决方案
解决方案1
0 2021-03-26 18:03:15
在小提琴中查看解决方案：
添加带有背景和文本的g元素：
const tooltip = d3.select('svg')
.append('g')
.style('visibility', 'hidden');
tooltip.append('rect')
.attr('width', 100)
.attr('height', 50)
.style('fill', '#fff')
.style('stroke', '#000')
tooltip.append('text')
.attr('x', 20)
.attr('y', 20)
在mouseenter 、 mousevove 、 mouseleave上更新它：
plots.append("rect")
.attr("width",plotWidth)
.attr("height",plotHeight)
.attr("fill","#ddd")
.on("mouseenter", (e, d) => {
tooltip.style('visibility', 'visible');
tooltip.select('text').text(d[0]);
})
.on("mouseleave", () => tooltip.style('visibility', 'hidden'))
.on("mousemove", e => tooltip.attr('transform', `translate(${e.clientX},${e.clientY})`))
如何在 d3.js toolTip 中换行？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.