Reactjs中的D3气泡图有空圆圈

Posted 2023-02-18

【中文标题】Reactjs中的D3气泡图有空圆圈

【英文标题】：D3 Bubble chart in Reactjs has empty circles

【发布时间】：2021-12-13 17:01:02

【问题描述】：

我在 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  >
      <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 的标量值。我觉得问题可能与圈子的创建有关。

【问题讨论】：

你是什么意思他们是空的？圆圈渲染，但没有填充任何颜色？

它们根本不出现，HTML 中的 元素不包含任何内容，如此处所示。通过将上面的代码放在 d3.json() 回调中，我设法让它工作。但实际上我不需要从文件中重新读取数据，因为我已经在函数道具中收到了它们。但是如果我尝试将数据直接传递给 svg.append() 调用，我在 HTML 中什么也得不到。我将使用此附加信息编辑问题。

【参考方案1】：

我终于设法让它工作了。我在这里为其他尝试做同样事情的人发布代码。

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");
        );