d3.js - d3 pack - 使气泡更平整（降低高度）

Question

pack布局是否可以扁平化？

这就是我所拥有的：

这就是我想要的：

正如你所看到的，第二组气泡更平。有没有办法做到这一点？

标签： d3.js

Answer 1

不幸的是，你不能用 来做到这一点d3.pack，但你可以使用 来实现类似的布局d3-force：

var numNodes = 30;
var nodes = d3.range(numNodes).map(function(d, i) {
  return {
    color: '#55c',
    radius: Math.random() * 12 + 12
  }
});

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(10))
  .force('y', d3.forceY().y(0))
  .force('collision',
    d3.forceCollide().radius(function(d) {
      return d.radius + 1;
    }))
  .on('tick', ticked);

function ticked() {
  var u = d3.select('svg g')
    .selectAll('circle')
    .data(nodes);

  var v = u.enter()
    .append('circle')
    .attr('r', function(d) {
      return d.radius;
    })
    .style('fill', function(d) {
      return d.color;
    })
    .merge(u)
    .attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return d.y;
    })

  u.exit().remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<div id="content">
  <svg width="400" height="200">
    <g transform="translate(200, 100)"></g>
  </svg>
</div>