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

Question

我需要实现 D3 气泡图，但是气泡散布在分区中（在特定坐标处散布在分区中）而不是圆包 layout.Is 可以将气泡的位置设置为这样的方式使用 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;
  });

例子here.

编辑

您可以随心所欲地排列气泡，您只是将它们定位在 x/y 2d space 中。如果您想了解一些复杂的东西，请考虑使用 d3 的 scales 来帮助将用户 space 映射到像素 space.

这是您的正弦波示例：

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

另一个例子here.

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

is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

javascript

bubble-chart

d3.js