В силовом макете d3.js задание значения силы тяжести делает макет круглым.
Однако я бы хотел, чтобы силовой макет был прямоугольным, а узлы имели отрицательный заряд и равное расстояние. (как выше)
Есть ли способ сделать макет силы прямоугольным?
Могу ли я добиться этого, изменив функцию тика?
Вот мой код:
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();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;
}<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
<div class="background">
</div>
</body>