d3.js принудительное размещение на элементах, отличных от svg - PullRequest
Новая
       9

d3.js принудительное размещение на элементах, отличных от svg

8 голосов
/ 15 февраля 2012

Можно ли использовать d3.js layout.force для (пере) размещения элементов, отличных от svg, таких как div?

Если у div есть position: absolute;, возможно left и top можно использовать как эквивалентдля атрибутов x1 и y1, используемых для элементов svg?

Цель состоит в том, чтобы иметь некоторые принудительные эффекты для изображений и пунктов меню с поддержкой IE8.Мне известно о том, что узлы svg могут быть изображениями, но поскольку мне нужно поддерживать IE8, это не вариант.

Если это невозможно, используется svgweb вместе с d3.jsстабильный вариант для этой цели?

Спасибо!

** Обновление **

D3 это круто !!Я начинаю понимать это, и вполне возможно использовать « сила » на обычных HTML-элементах, таких как div, так как d3.layout.force(), по сути, дает вам координаты x и y для каждого «тика» (или рамку), которые вы можете использовать по своему усмотрению.
то есть: 

force.nodes(data)
     .on("tick", tick)
     .start();

function tick() {
     div.style("left", function(d) {return d.x+"px"})
        .style("top", function(d) {return d.y+"px"});
}

работает просто отлично!

перетаскивание с .call(force.drag); действительно доставляет вам проблемы (как и ожидалось)).

firebug: 

(container.ownerSVGElement || container).createSVGPoint is not a function
d3_svg_mousePoint()d3.js (line 3718)
container = div#nav
e = mousemove clientX=607, clientY=200
mouse()d3.js (line 3711)
container = div#nav
d3_behavior_dragPoint()d3.js (line 4481)
d3_behavior_dragDispatch()d3.js (line 4453)
type = "drag"
d3_behavior_dragMove()d3.js (line 4491)
l()d3.js (line 1871)
e = mousemove clientX=607, clientY=200
[Break On This Error]   

var point = (container.ownerSVGElement || container).createSVGPoint();

Должно быть исправимо.

Ответы [ 2 ]

8 голосов
/ 17 января 2013

Вот пример, показывающий, что элементы svg, canvas и div имеют одинаковую принудительную компоновку: http://bl.ocks.org/4491174

2 голосов
/ 15 февраля 2012

В принципе, в D3 нет ничего специфичного для SVG. Вы должны будете увидеть, работает ли это на практике для вашего конкретного приложения, но это, безусловно, звучит выполнимо. В частности, обратите внимание на документацию для force.layout.on , в которой приведен пример, показывающий, как обновить позиции узлов и ссылок. Если вы измените этот код, чтобы изменить соответствующие атрибуты позиции div, он должен работать.

...