D3使g元素拖動

我是新來的d3.js，只是試圖學習。我該如何製作一個可拖動的？我有一個正確的文字在裏面。我想將兩個對象拖在一起。這裏是我的plunkr：D3使g元素拖動

我試着用搜索引擎的樣品，但他們過於複雜，我難以理解其中的大多數。

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）; function dragmove（d）{ \t var x = d3.event.x; \t var y = d3.event.y; （「transform」，「translate（」+ x +「，」+ y +「）」）; \t} 但它是錯誤的 – cobolstinks

我看到你正在使用D3 v4。因此，請參閱已棄用d3.drag（）的d3.drag（）。d3.behavior.drag（） –

可以改造<g>元素，首先建立onmousedown事件座標。
嘗試以下：

<!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可以嘗試

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

好吧，似乎移動矩形但不是文本。嗯 – cobolstinks

D3使g元素拖動

回答

相關問題