डी 3 जावास्क्रिप्ट लाइब्रेरी

Question

में ड्रैग व्यवहार के लिए उत्पत्ति (drag.origin) को कैसे सेट करें I d3 फ्रेमवर्क का उपयोग करके HTML-text और पृष्ठभूमि-आयत से समूह के लिए ड्रैग व्यवहार को लागू करने का प्रयास कर रहा हूं। मैं इसे काम करने में सक्षम था, हालांकि drag.origin को सेट नहीं करते समय मैं माउस-स्थिति/तत्व-निर्देशांक ऑफसेट के कारण ध्यान देने योग्य कूद देख सकता हूं। वास्तव में d3 wiki-page पर वर्णित कैसे किया गया है, हालांकि पृष्ठ ने वर्णन किया है कि उत्पत्ति को खींचने के लिए कैसे सेट किया जाए, मैं ठीक से समझ नहीं पा रहा हूं कि मेरे उदाहरण में इसे कैसे लागू किया जाए। मैंने दो अलग-अलग दृष्टिकोणों की कोशिश की: तत्वों को एक साथ समूहबद्ध करने और नए तत्व धारण करने वाले तत्व को परिभाषित करने के लिए तत्व का उपयोग करना। पहले मामले में मुझे अनुवाद-फ़ंक्शन का उपयोग करना होगा और मुझे यह भी नहीं पता कि समूह के निर्देशांक कैसे प्राप्त करें।

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500); 

var group = svg.append("svg:g") 
    .attr("transform", "translate(10, 10)") 
    .attr("id", "group"); 

var rect1 = group.append("svg:rect") 
    .attr("rx", 6) 
    .attr("ry", 6) 
    .attr("x", 5/2) 
    .attr("y", 5/2) 
    .attr("id", "rect") 
    .attr("width", 250) 
    .attr("height", 125) 
    .style("fill", 'white') 
    .style("stroke", d3.scale.category20c()) 
    .style('stroke-width', 5); 


var html1 = group.append("foreignObject") 
    .attr("x", 50) 
    .attr("y", 25) 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr("id", "fobject") 
    .style("border-color", d3.scale.category20c()) 
    .append("xhtml:div") 
    .style("font", "14px 'Helvetica Neue'") 
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam."); 

var innerSvg = svg.append("svg") 
    .attr("x", 500) 
    .attr("y", 10) 
    .attr("id", "innerSvg"); 

var rect2 = innerSvg.append("svg:rect") 
    .attr("rx", 6) 
    .attr("ry", 6) 
    .attr("x", 5/2) 
    .attr("y", 5/2) 
    .attr("id", "rect") 
    .attr("width", 250) 
    .attr("height", 125) 
    .style("fill", 'white') 
    .style("stroke", d3.scale.category20c()) 
    .style('stroke-width', 5); 

var html2 = innerSvg.append("foreignObject") 
    .attr("x", 50) 
    .attr("y", 25) 
    .attr("width", 200) 
    .attr("height", 100) 
    .attr("id", "fobject") 
    .style("border-color", d3.scale.category20c()) 
    .append("xhtml:div") 
    .style("font", "14px 'Helvetica Neue'") 
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam."); 

var drag1 = d3.behavior.drag() 
    .on("drag", function(d,i) { 
     d3.select(this).attr("transform", function(d,i){ 
      return "translate(" + [ d3.event.x,d3.event.y ] + ")" 
     }) 
    }); 

var drag2 = d3.behavior.drag() 
    .on("drag", function(d,i) { 
     d3.select(this) 
     .attr("x", d3.event.x) 
     .attr("y", d3.event.y); 
    }); 

group.call(drag1); 
innerSvg.call(drag2); 

मैं बहुत किसी भी स्पष्टीकरण की सराहना करेंगे, स्वाभाविक रूप से मैं एक काम उदाहरण यहां तैयार: http://jsfiddle.net/Y8y7V/

Answer 1

आप बस तदनुसार origin() समारोह सेट करना होगा। दूसरे मामले में यह सीधा है, पहले मामले में कुछ और मुश्किल है क्योंकि आप निर्देशांक के साथ-साथ एक परिवर्तन का उपयोग कर रहे हैं। बुनियादी पैटर्न (दूसरे मामले के लिए) इस प्रकार है:

.origin(function() { 
     var t = d3.select(this); 
     return {x: t.attr("x"), y: t.attr("y")}; 
    }) 

अपडेट किया गया jsfiddle here।

Answer 2

समूह तत्व में कोई x/y विशेषता नहीं है - कोई समस्या नहीं! बनाएँ:

var node = svg.append("g") 
      .attr('x',x_1) 
      .attr('y',y_1) 
      .attr("class","node") 
      .attr("name","Node_A") 
      .attr("transform","translate(" + x_1 + ", " + y_1 +")") 
      .call(drag); 

जब, लार्स से .origin समारोह

काम करेंगे और एक्स अद्यतन करने के लिए भूल जाते हैं न, वाई जिम्मेदार बताते हैं, जबकि खींच:

function dragged() { 

    d3.select(this).attr("transform","translate(" + d3.event.x + ", " + d3.event.y +")"); 
    d3.select(this).attr("x",d3.event.x); 
    d3.select(this).attr("y",d3.event.y); 
}