是否可以调整 D3 气泡图以获得分散位置的气泡而不是圆形包

Question

>我需要实现 D3 气泡图，但气泡分散在分区中（在特定坐标处分布在整个分区中），而不是圆形包布局。是否可以使用 D3.js 以这种方式设置气泡的位置？

Answer 1

当然，只是不要使用布局并将每个圆圈设置cx并自己cy：

svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', function(d){
    return d.r;
  })
  .attr('cx', function(d){
    return d.x;
  })
  .attr('cy', function(d){
    return d.y;
  });

这里的例子。

编辑

您可以随意排列气泡，只需将它们放置在 x/y 2d 空间中即可。 如果您想了解复杂的东西，请考虑使用 d3 的缩放来帮助将用户空间映射到像素空间。

这是您的正弦波示例：

var svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);
var xscale = d3.scale.linear()
  .domain([0, 10])
  .range([0, 500]);
var yscale = d3.scale.linear()
    .domain([-1, 1])
    .range([0, 500]);
var data = [];
for (var i = 0; i < 10; i+=0.1){
  data.push({
    x: i,
    y: Math.sin(i),
    r: Math.random() * 10
  });
}
svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', function(d){
    return d.r;
  })
  .attr('cx', function(d){
    return xscale(d.x);
  })
  .attr('cy', function(d){
    return yscale(d.y);
  });

这里再举一个例子。