У меня есть набор данных, которые я визуализирую с помощью d3.js. Я представляю точки данных в виде пузырьков, где конфигурация пузырьков выглядит следующим образом:
var dot = svg.selectAll("g")
.data(data)
.enter()
.append("g");
dot.append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return xp(x(d)); })
.attr("cy", function(d) { return yp(y(d)); })
.style("fill", function(d) { return colorp(color(d)); })
.attr("r", function(d) { return radiusp(radius(d)*2000000); });
dot.append("text")
.attr("x", function(d) { return xp(x(d)); })
.attr("y", function(d) { return yp(y(d)); })
.text(function(d) { return d.name; })
Где xp, yp, colorp и radiusp определяются следующим образом:
var xp = d3.scale.log().domain([300, 1e5]).range([0, width]),
yp = d3.scale.linear().domain([10, 85]).range([height, 0]),
radiusp = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),
colorp = d3.scale.category10();
В этот момент пузырьки отображаются как статические на своих позициях (где положение определяется xp и yp), в то время как размер пузырька в основном определяется радиусом p, а цвет определяется цветом p.
Сейчас я показываю их точно так же, как этот пример: http://bl.ocks.org/mbostock/4063269
Мне нужно отобразить их в таком виде: http://jsfiddle.net/andycooper/PcjUR/1/
То есть: они должны быть упакованы с использованием функции гравитации, иметь некоторый заряд, их можно перетаскивать и в какой-то степени отталкивать друг друга. Я вижу, что есть способ через d3.layout.force(), но не могу интегрировать его в это. Я буду очень благодарен, если вы можете предложить мне правильный путь или какой-нибудь рабочий пример или даже подсказку. Спасибо.
d3.layout.force()
- person user568109   schedule 22.07.2013