Question

我正在尝试制作水平气泡图，但是我不知道如何避免气泡之间的碰撞。每个气泡代表一年，并且可以具有任何值和大小而不会发生冲突。我该如何解决？

D3版本

<script src="https://unpkg.com/d3@5.15.0/dist/d3.min.js"></script>

Js

var width = 1000;
var height = 500;

const data = [ { name: "2010", value: 2 }, 
               { name: "2011", value: 20 }, 
               { name: "2012", value: 8 }, 
               { name: "2013", value: 2 }, 
               { name: "2014", value: 31 }, 
               { name: "2015", value: 45 }, 
               { name: "2016", value: 20 }, 
               { name: "2017", value: 10 },
               { name: "2018", value: 5 },
               { name: "2019", value: 6 },
               { name: "2020", value: 1 }];    

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var g = svg.selectAll("g")
           .data(data)
           .enter()
           .append("g")
           .attr("transform", function(d, i) {
               return "translate(0,0)";
           });

g.append("circle")
  .attr("cx", function(d, i) {
      return (i * 100) + 50;
  })
  .attr("cy", function() {
      return 100;
  })
  .attr("r", function(d) {
      return d.value * 2;
  })
  .attr("fill", function(d, i) {
      return '#FF5532';
  });

g.append("text")
  .attr("x", function(d, i) {
      return (i * 100) + 50;
  })
  .attr("y", 105)
  .attr("stroke", "black")
  .attr("font-size", "12px")
  .attr("font-family", "sans-serif")
  .text(function(d) {
      return d.name;
  });

Answer 1

您可以堆叠气泡而不用说出气泡的确切位置，而是有条件地将气泡放置到上一个气泡。

.attr("cx", function(d, i) {
  return d.cx;
})
.attr("cy", function() {
  return 100;
})
.attr("r", function(d) {
 return d.radius;
})

您可以使用atstrong中的 cx 和半径值

select * from "api"."auto"."endpoint_success_metrics"

也不要忘记相应地修改文本位置并创建var数据（而不是const）

避免在气泡图中发生冲突

1 个答案: