Question

在d3.js强制布局中，给出重力值会使布局变为圆形。

但是，我希望将力布局设为矩形，而节点具有负电荷且均匀距离。（如上所述）

有没有办法让力布局成矩形？

我可以通过修改滴答功能来实现吗？

这是我的代码：

＆＃13;

var background = d3.select('.background');

var width = background.node().getBoundingClientRect().width,
	height = background.node().getBoundingClientRect().height;

var nodes = d3.range(50).map(function(d, i) {
		return {
      		text: "Hello"
		};
	});

var messages = background.selectAll('.message')
	.data(nodes)
	.enter()
		.append('div')
		.attr('class', 'message')
		.text(d => d.text)
		.each(function(d, i) {
			d.width = this.getBoundingClientRect().width;
			d.height = this.getBoundingClientRect().height;
		});

var force = d3.layout.force()
	.gravity(1/88)
	.charge(-50)
	.nodes(nodes)
	.size([width, height]);

messages.call(force.drag);

force.on('tick', function(e) {
	messages.each(d => {
		d.x = Math.max(0, Math.min(width - d.width, d.x));
		d.y = Math.max(0, Math.min(height - d.height, d.y));
	});
	
	messages.style('left', d => `${d.x}px`)
		.style('top', d => `${d.y}px`);
});

force.start();

＆＃13;

body {
  padding: 0;
  margin: 0;
}
.background {
  width: 100%;
  height: 100vh;
  border: 1px solid #007aff;
}
.message {
  display: inline-block;
  font-family: sans-serif;
  border-radius: 100vh;
  color: white;
  padding: 10px;
  background-color: #007aff;
  position: absolute;
}
.boundary {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  position: absolute;
}

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
  <div class="background">
  </div>
</body>

＆＃13;

Answer 1

好的，编辑3：在d3v4中，forceCollide可用于设置节点之间的最小距离，如果您使用正强度，则将节点绘制在一起，帮助将它们设置为均匀距离（尽管圆形比矩形看起来更好）：

var force = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody().strength(-10))
.force("collide", d3.forceCollide(30).strength(1).iterations(1))
.force('x', d3.forceX(width/2).strength(0.5))
.force('y', d3.forceY(height/2).strength(10));

假设节点位于矩形svg中，将它们限制在SVG的中心可以帮助平滑边缘：

position.nodes(nodes).on('tick', function ticks() {
        nodes.attr("cx", function(d) {
            return d.x = Math.max(20, Math.min(width + 20, d.x))
        }).attr("cy", function(d) {
            return d.y = Math.max(20, Math.min(height + 20, d.y));
        })
    });

并且利用力量强度可以帮助沿着y轴绘制它们：

var position = d3.forceSimulation(nodes).force("charge", d3.forceManyBody())
.force('x', d3.forceX(width/2).strength(1))
.force('y', d3.forceY(height/2).strength(5));

fiddle here.

似乎v4中的力量比v3更可定制，我认为forceCollide将一些变通方法集成到库中。因此，您可以尝试找到v3解决方法，或者考虑升级到v4。

在第3节中，我玩重力，充电和限制x和y来保持盒子中的节点更好，fiddle here.但是我对v3的了解不够多，无法改善它这一点。

如何使d3.js强制布局重力矩形？

1 个答案: