2012-02-15 34 views
8

Bố cục d3.js có thể được sử dụng để (lại) vị trí các phần tử không phải svg như div không?d3.js bố trí lực trên các phần tử không phải là svg

Nếu div của đã position: absolute; lẽ lefttop có thể được sử dụng như một tương đương cho x1y1 thuộc tính như được sử dụng cho các yếu tố svg?

Mục đích là để có một số hiệu ứng lực trên ảnh và các mục menu có hỗ trợ IE8. Tôi nhận thức được thực tế là các nút svg có thể là hình ảnh nhưng vì tôi cần hỗ trợ IE8, đây không phải là một tùy chọn.

Nếu không thể, đang sử dụng svgweb cùng với d3.js một tùy chọn ổn định cho mục đích này?

Cảm ơn!

** Update **

D3 là mát mẻ !! Tôi bắt đầu nhận được hàng của nó và chắc chắn có thể sử dụng "lực" trên các phần tử html thông thường như divs như d3.layout.force() về cơ bản cung cấp cho bạn x và y tọa độ cho mọi "đánh dấu" (hoặc khung) mà bạn có thể sử dụng tuy nhiên bạn muốn.
ví dụ:

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"}); 
} 

công trình tốt!

kéo với .call(force.drag); không cung cấp cho bạn sự cố (như mong đợi).

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(); 

Nên fixable mặc dù.

Trả lời

2

Về nguyên tắc không có gì đặc trưng SVG trong D3. Bạn sẽ phải xem nếu nó hoạt động trong thực tế cho ứng dụng cụ thể của bạn, nhưng nó chắc chắn âm thanh khả thi. Có một cái nhìn cụ thể tại the documentation for force.layout.on, trong đó có một ví dụ cho thấy làm thế nào để cập nhật vị trí nút và liên kết. Nếu bạn thay đổi mã đó để sửa đổi các thuộc tính vị trí có liên quan của div, nó sẽ hoạt động.

Các vấn đề liên quan