D3 make g要素をドラッグ

私はd3.jsを初めて使い、勉強しようとしています。どのように私はg draggableを作るのですか？私はその中に矩形とテキストがあるgを持っています。私は両方のオブジェクトを一緒にドラッグしたい。ここに私のplunkrは次のとおりです。D3 make g要素をドラッグ

daggable d3.js g element

私はサンプルのためにグーグルで試みたが、彼らは過度に複雑であり、私はそれらのほとんどを理解する難しさを抱えています。

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

ありがとう！

出典

2017-02-24 cobolstinks

がd3.behavior.dragを見てみましょう（）私はのような何かを試してみた@FrancisHemsher –

：するvarドラッグ= d3.behavior.drag（） .on（ "drag"、dragmove）; 関数dragmove（d）{ \t var x = d3.event.x; \t var y = d3.event.y; \t d3.select（this）.attr（ "transform"、 "translate（" + x + "、" + y + "）"）; \t} しかし、それは間違っていた – cobolstinks

私はあなたがD3 v4を使用している参照してください。したがって、d3.behavior.drag（）を廃止しましたd3.behavior.drag（）を参照してください。 –

を試すことができ、常にあります。
以下試してみてください。

<!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>

出典

2017-02-25 14:06:59

ありがとう、これは私が探していたものです。私はもっと先に進む前に、図書館の基礎をもっと詳しく知る必要があります。私は、コール、変換、選択が実際に何をしているのかを実際に把握していません。 – cobolstinks

あなたはあなたの選択をdatanumていなかったので、関数dはundefined.youあなたが最初れるonmousedown座標を確立し、<g>要素を変換することができ

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

出典

2017-02-25 08:18:22

okはテキストを移動するのではなく、rectを移動するようです。 hmm – cobolstinks

答えて

関連する問題