Я хотел бы сделать что-то немного необычное с силовыми макетами (для визуализации графиков). Созвездия и все это интересно посмотреть, но для данных временных рядов это не так полезно. Я хотел бы иметь возможность ограничить компоновку некоторой осью, например, путем размещения узлов в соответствии со временем их появления в наборе данных, сохраняя при этом «бодрость» визуализации. Возможно ли это с помощью d3?Constrained d3.js Force display
Чтобы подробно остановиться на моем комментарии, да, это вполне возможно. Силовой макет фактически не позиционирует сами узлы, он просто вычисляет позиции. В обработчике события tick вы обычно предоставляете функцию, которая заботится о позиционировании. Там вы можете добавить произвольные ограничения, которые ограничивают перемещение узлов.
Принимая один из stock examples, вы можете сделать следующие действия, чтобы ограничить координату x в пределах + -10 от предполагаемой позиции с неограниченным y.
force.on("tick", function() {
node.each(function(d) {
var intended = scale(d.value);
d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px));
});
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
Вот еще example, который использует расположение силы на положение меток. Там позиция x игнорируется (т. Е. Константа), и только макет y зависит от компоновки.
Спасибо, Ларс! Могу ли я спросить: «var предназначено = scale (d.value)», которое должно быть заменено на «var xpos = scale (d.date)» в моем случае, где datetime - это значение, на которое я хочу надеть ось х? – ericmjl
Вы не разместили ни одного кода, поэтому я не знаю, что вы называете ваши переменные, но да, это означало бы положение x. –
Спасибо, Ларс! Я просто смог проверить его, исправив некоторые другие ошибки в моем коде, и он работает временно! Теперь измените масштаб, чтобы убедиться, что он работает правильно. :-) Еще раз спасибо! – ericmjl
Webcola - отличный инструмент для создания макетов с ограничениями с D3.JS.
Да, [этот вопрос] (http://stackoverflow.com/questions/15100060/d3-js-force-directed-layout-constrained-by-a-shape) должен дать вам указатели. –