d3.js

Question

का उपयोग कर एक एसवीजी टेक्स्ट ड्रैगगेबल बनाना मैं एक संपादक में उपयोग के लिए डी 3 विज़ुअलाइज़ेशन ड्रैगगेबल में एक टेक्स्ट बनाना चाहता हूं। मैंने उदाहरणों के साथ खेलना शुरू किया (http://bl.ocks.org/mbostock/4063550)। जब मैं टेक्स्ट तत्व में ड्रैगबेवियर जोड़ता हूं, तो मैं क्रोमडेवटूल से बता सकता हूं कि कुछ खींच लिया जाता है लेकिन ड्रैग से कोई दृश्य प्रतिनिधित्व नहीं होता है। मैंने JQuery UI का उपयोग करके ऐसा करने का भी प्रयास किया जो या तो काम नहीं करता था। मुझे क्या याद आती है और ऐसा करना भी संभव है?

Answer 1

आप तत्वों को ड्रैग ईवेंट जोड़ने के लिए drag.behaviour का उपयोग कर सकते हैं।

function dragmove(d) { 
    d3.select(this) 
     .style("top", ((d3.event.sourceEvent.pageY) - this.offsetHeight/2)+"px") 
     .style("left", ((d3.event.sourceEvent.pageX) - this.offsetWidth/2)+"px") 
} 

2) हैंडलर के रूप में इसके बाद के संस्करण का उपयोग करके खींचें व्यवहार बनाएं::

var drag = d3.behavior.drag() 
    .on("drag", dragmove); 

3) यह बाइंड

1) (प्रकार d3.event का) खींचें घटना को संभालने के लिए एक समारोह बनाएं डी 3 चयन पर .call का उपयोग करके तत्वों या तत्वों का एक सेट:

d3.select("body").append("div") 
    .attr("id", "draggable") 
    .text("Drag me bro!") 
    .call(drag) 

यह प्रयास करें: http://jsfiddle.net/HvkgN/2/

यहाँ एक ही उदाहरण है, adapted for an svg text element:

function dragmove(d) { 
    d3.select(this) 
     .attr("y", d3.event.y) 
     .attr("x", d3.event.x) 
} 

var drag = d3.behavior.drag() 
    .on("drag", dragmove); 

d3.select("body").append("svg") 
    .attr("height", 300) 
    .attr("width", 300) 
    .append("text") 
     .attr("x", 150) 
     .attr("y", 150) 
     .attr("id", "draggable") 
     .text("Drag me bro!") 
     .call(drag) 

Answer 2

एक बेहतर दिखने तरह से एक एसवीजी तत्व ओर खींचने से जोड़ने के लिए एक का अनुवाद बदलने कि चारों ओर खींचे जाने योग्य तत्व चाल का प्रयोग है। माउस के आंदोलन की निगरानी के लिए d3.event.dx और d3.event.dy का उपयोग करने वाले ड्रैग इवेंट हैंडलर के साथ इसे युगल करें।

var transX = 0; 
var transY = 0; 
var theElement = d3.select('svg#xyz text.blahblah').attr('transform', "translate(" + transX + ", " + transY + ")"); 

var repositionElement = function(data) { 
    transX += d3.event.dx; 
    transY += d3.event.dy; 
    theElement.attr('transform', "translate(" + transX + ", " + transY + ")"); 
}; 

var addDragging = function (element) { 
    element.call(d3.behavior.drag().on('drag', repositionElement)); 
}; 

addDragging(theElement); 

इसके अलावा, एक्स को बदलने के विपरीत/y सीधे, इस तकनीक एक पूरे <g> समूह खींचने योग्य बनाने के लिए इस्तेमाल किया जा सकता है, इसलिए जब उपयोगकर्ता क्लिक करता है और समूह, पूरे समूह चाल के किसी भी हिस्से खींच लेता है!