d3.js गैर-एसवीजी तत्वों पर बल लेआउट

Question

क्या d3.js layout.force को डीवी की तरह गैर-svg तत्वों को (पुनः) स्थिति में उपयोग किया जा सकता है?

तो div के है position: absolute; शायद left और top रूप svg घटकों के लिए उपयोग x1 और y1 विशेषताओं के लिए एक समकक्ष के रूप में इस्तेमाल किया जा सकता है?

लक्ष्य आईई 8 समर्थन के साथ छवियों और मेनू वस्तुओं पर कुछ बल प्रभाव पड़ता है। मुझे इस तथ्य से अवगत है कि एसवीजी नोड्स छवियां हो सकती हैं लेकिन मुझे आईई 8 का समर्थन करने की आवश्यकता है, यह एक विकल्प नहीं है।

यदि संभव नहीं है, तो इस उद्देश्य के लिए d3.js एक स्थिर विकल्प के साथ svgweb का उपयोग कर रहा है?

धन्यवाद!

** अद्यतन **

डी 3 शांत है !! मुझे इसका लटका मिलना शुरू हो रहा है और यह सुनिश्चित करना संभव है कि "बल" नियमित एचटीएमएल तत्वों जैसे divs d3.layout.force() पर अनिवार्य रूप से आपको प्रत्येक "टिक" (या फ्रेम) के लिए एक्स और वाई निर्देशांक देता है जो आप कर सकते हैं हालांकि आप चाहते हैं उपयोग करें।
अर्थात्:

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); के साथ खींचने से आपको समस्याएं (अपेक्षित) मिलती हैं।

फ़ायरबग:

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

हालांकि सुधारी जा सकने वाली होना चाहिए।

Answer 1

सिद्धांत रूप में डी 3 में एसवीजी-विशिष्ट कुछ भी नहीं है। आपको यह देखना होगा कि यह आपके विशेष एप्लिकेशन के लिए अभ्यास में काम करता है, लेकिन यह निश्चित रूप से व्यवहार्य लगता है। विशेष रूप से the documentation for force.layout.on पर एक नज़र डालें, जिसमें एक उदाहरण है जिसमें नोड और लिंक पोजिशन अपडेट करना है। यदि आप div के प्रासंगिक स्थिति विशेषताओं को संशोधित करने के लिए उस कोड को बदलते हैं, तो इसे काम करना चाहिए।

Answer 2

यहां एक उदाहरण है जो svg, canvas और div तत्वों को दिखाता है जो सभी एक ही बल-निर्देशित लेआउट साझा करते हैं: http://bl.ocks.org/4491174