D3 make g Element Ziehen

Ich bin neu in d3.js, und versuche nur zu lernen. Wie kann ich ein g ziehen? Ich habe ein g mit einem Rect und Text drin. Ich möchte beide Objekte zusammen ziehen. Hier ist meine plunkr:D3 make g Element Ziehen

daggable d3.js g element

Ich habe versucht, für Proben googeln, aber sie sind zu komplex und ich Schwierigkeiten haben, die meisten von ihnen verstehen.

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

    let g = svg.append("g") 
     .on("mouseover", function(d) { 
      d3.select(this) 
       .style("cursor","pointer"); 
      d3.select(this).select("rect") 
       .style("fill", "#325d81"); 
     }) 
     .on("mouseout", function(d){ 
      d3.select(this) 
       .style("cursor","default"); 
      d3.select(this).select("rect") 
       .style("fill","#4682b4"); 
     });

Vielen Dank!

Quelle

2017-02-24 cobolstinks

einen Blick auf d3.behavior.drag nehmen() –

@FrancisHemsher Ich habe so etwas wie versucht zu tun: var drag = d3.behavior.drag () .on ("drag", dragmove); Funktion Ziehen (d) { \t var x = d3.event.x; \t var y = d3.event.y; \t d3.select (this) .attr ("transformieren", "übersetzen (" + x + "" + y + ")"); \t} aber es war – cobolstinks

Fehler Ich sehe, Sie verwenden D3 v4. Daher siehe d3.drag(), was veraltet d3.behavior.drag() –

Sie können die <g> Element transformieren, zunächst die onmousedown Koordinaten zu etablieren.
Versuchen Sie die folgenden:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<meta charset="utf-8"> 
 
<body> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script> 
 

 
    function wrap(text, width) { 
 
     text.each(function() { 
 
     var text = d3.select(this), 
 
      words = text.text().split(/\s+/).reverse(), 
 
      word, 
 
      line = [], 
 
      lineNumber = 0, 
 
      lineHeight = 1.1, // ems 
 
      y = text.attr("y"), 
 
      dy = parseFloat(text.attr("dy")), 
 
      tspan = text.text(null).append("tspan").attr("x", 10).attr("y", y).attr("dy", dy + "em"); 
 
     while (word = words.pop()) { 
 
      line.push(word); 
 
      tspan.text(line.join(" ")); 
 
      if (tspan.node().getComputedTextLength() > (width-7.5)) { 
 
      line.pop(); 
 
      tspan.text(line.join(" ")); 
 
      line = [word]; 
 
      tspan = text.append("tspan").attr("x", 10).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
 
      } 
 
     } 
 
     }); 
 
    } 
 

 
let longText = "Now is the time for all good men to come to the aid of their country and asds and stuff an such jdsfj kljasdkflj kdsfj sdfkj klsjd kljdsf lk sdfj lkdfs jlk sd a"; 
 

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

 
let g = svg.append("g") 
 
\t .on("mouseover", function(d) { 
 
    \t \t d3.select(this) 
 
    \t \t \t .style("cursor","pointer"); 
 
    \t \t d3.select(this).select("rect") 
 
    \t \t \t .style("fill", "#325d81"); 
 
\t }) 
 
\t .on("mouseout", function(d){ 
 
\t \t d3.select(this) 
 
\t \t \t .style("cursor","default"); 
 
\t \t d3.select(this).select("rect") 
 
\t \t \t .style("fill","#4682b4"); 
 
\t }) 
 
    .on('mousedown', function() { 
 
    coordX= d3.mouse(this)[0]; 
 
    coordY= d3.mouse(this)[1]; 
 
}) 
 
\t .call(d3.drag() 
 
    \t .on("drag", dragged)) 
 

 

 
    let rect2 = g.append("rect") 
 
    .attr("x",5) 
 
\t .attr("y",5) 
 
\t .attr("rx",20) 
 
\t .attr("ry",20) 
 
\t .attr("width",300) 
 
\t .attr("height",150) 
 
\t .style("fill","#4682b4") 
 
\t .style("stroke","black") 
 
\t .style("stroke-width",5) 
 
\t .style("opacity",0.5) 
 

 
\t ; 
 

 
\t var txt = g.append('text') 
 
    .text(longText) //<-- our super long text 
 
    .attr('x', 0) 
 
    .attr('y', 30) 
 
    .attr('dy', '.71em') 
 
    .style('fill', 'white') 
 
    .call(wrap, 300); //<-- wrap it according to our width 
 

 
    var height = txt.node().getBBox().height + 40; //<-- get our height plus a margin 
 
    rect2.attr('height', height); //<-- change our rect 
 

 

 
    function dragged() { 
 
    var transX=d3.event.x-coordX 
 
    var transY=d3.event.y-coordY 
 
    d3.select(this).attr("transform","translate("+transX+" "+transY+")") 
 

 
} 
 

 

 

 
</script> 
 
</body> 
 
</html>

Quelle

2017-02-25 14:06:59

Danke das ist, was ich gesucht habe. Ich muss die Grundlagen der Bibliothek genauer kennenlernen, bevor ich weiter gehe. Ich verstehe nicht wirklich, was Call, Transform und Select eigentlich machen. – cobolstinks

, weil Sie nicht Ihre Auswahl datanum, ist Funktion d immer kann undefined.you versuchen

function dragged(d) { 
     var x=d3.event.x, y=d3.event.y 
     d3.select(this).select("text") 
     .attr("x", x) 
     .attr("y", y); 
     d3.select(this).select("rect") 
     .attr("x",x) 
     .attr("y",y); 
    }

Quelle

2017-02-25 08:18:22

ok, das scheint die rect, aber nicht den Text zu bewegen. hmm – cobolstinks

D3 make g Element Ziehen

Antwort

Verwandte Themen