javascript - Reactjs中的D3气泡图有空圆圈
问题描述
我在 ReactJS 17.0.2 项目中使用 d3 v7。我想集成此处显示的代码: https : //www.d3-graph-gallery.com/graph/bubble_tooltip.html 我从函数道具接收数据,但如果我将它们直接传递给 svg.append( ).data() 我得到了显示好的轴,但没有显示气泡。我用来创建圆圈的代码是这样的:
function D3BubbleChart({ input }) {
const ref = useD3(
(svg) => {
/* some margin, tooltip and axis stuff here */
...
/* then I try to create the circles like this */
svg
.append("g")
.selectAll("dot")
.data(mydata)
.append("circle")
.attr("class", "bubbles")
.attr("cx", (d) => x(d.average_value))
.attr("cy", (d) => y(d.average_price))
.attr("r", (d) => z(d.pieces))
.style("fill", "red")
.on("mouseover", showTooltip)
.on("mousemove", moveTooltip)
.on("mouseleave", hideTooltip)
其他所有内容(轴,工具提示......)似乎都可以构建,但节点是空的。HTML 页面中的 Svg 元素如下所示:
<svg style="height: 500px; width: 100%; margin-right: 0px; margin-left: 0px;">
<g id="plot-area">
<svg width="500" height="420">
<g transform="translate(50,10)">
<g transform="translate(0, 380)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">...</g>
<g class="tick" opacity="1" transform="translate(36.33333333333333,0)">...</g>
...
</svg><div class="tooltip" style="opacity: 0; background-color: black; border-radius: 5px; padding: 10px; color: white;"></div></g>
<g class="x-axis"></g>
<g class="y-axis"></g>
</svg>
我只复制了相关元素以显示 g 元素为空。我是否可以为 d3 v7 使用 d3 v6 代码?我无法找到特定于 d3 v7 气泡图的文档。我检查了数据,它包含数据,但我也尝试用相同的结果硬编码 cx、cy 和 r 的标量值。我觉得问题可能与圈子的创建有关。
解决方案
我终于设法让它工作了。我在这里为其他尝试做同样事情的人发布代码。
const ref = useD3(
(svg) => {
// set the dimensions and margins of the graph
const margin = { top: 10, right: 20, bottom: 30, left: 50 },
width = 1080 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
svg = d3
.select("#plot-area")
.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
const x = d3.scaleLog().domain([1, 2000]).range([0, width]);
svg
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x));
// Add Y axis
const y = d3.scaleLinear().domain([0, 4]).range([height, 0]).nice();
svg.append("g").call(d3.axisLeft(y));
// Add a scale for bubble size
const z = d3.scaleLog().domain([1, 1000]).range([1, 100]);
// -1- Create a tooltip div that is hidden by default:
const tooltip = d3
.select("#plot-area")
.append("div")
.style("opacity", 1)
.style("position", "absolute")
.attr("class", "tooltip")
.style("background-color", "black")
.style("border-radius", "5px")
.style("padding", "10px")
.style("color", "white");
// -2- Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
const showTooltip = function (event, d) {
tooltip.transition().duration(200);
tooltip
.style("opacity", 1)
.html("Collection: " + d.name + " " + d.tokens + " tokens")
.style("left", event.x / 2 + "px")
.style("top", event.y / 2 + 30 + "px");
};
const moveTooltip = function (event, d) {
tooltip
.style("left", event.x / 2 + "px")
.style("top", event.y / 2 + 30 + "px");
};
const hideTooltip = function (event, d) {
tooltip.transition().duration(200).style("opacity", 0);
};
// Add dots
svg
.append("g")
.selectAll("dot")
.data(input)
.join("circle")
.attr("class", "bubbles")
.attr("cx", (d) => x(d.average_value))
.attr("cy", (d) => y(d.average_price))
.attr("r", (d) => z(d.pieces))
.style("fill", "red")
// -3- Trigger the functions
.on("mouseover", function () {
return tooltip.style("visibility", "visible");
})
.on("mousemove", function (event) {
return tooltip
.style("top", event.pageY + "px")
.style("left", event.pageX + "px");
})
.on("mouseout", function () {
return tooltip.style("visibility", "hidden");
});
推荐阅读
- python - VS Code Jupyter 扩展:在 Spark 集群上运行我的笔记本?
- vue.js - 在 vue axios 中将字段值作为变量传递
- flutter - 如何从 showAboutDialog 中删除查看许可证按钮 | 扑
- jquery - Bootstrap Datepicker 基于选择的每月/半月禁用日期
- c - 如何在守护进程中使用 ioctl?
- file - 在 Jenkinsfile 中逐行读取文件 - groovy
- java - Java 强制在每个线程上为 Runnable 创建新实例
- docker - 用作服务器的 docker 映像的适当入口点是什么?
- html - How to add only one hyperlink using kableExtra
- angular - “检测到循环依赖”警告 - Angular