v4에서 드래그 할 때 오브젝트와 텍스트를 연결하려고 시도합니다

Question

this example과 비슷한 v4의 sankey 다이어그램에이를 통합하기 위해 약 d3.drag에 대해 충분히 배우려고했습니다.

시작점은 오브젝트 + 텍스트 드래그 구현 here과 통합하려고 시도한 here의 예를 드래그하는 Mikes circle입니다.

나는 비극적으로 d3.drag를 사용하여 'g'요소를 잡는 방법을 제대로 이해할 수 없습니다.

지난 며칠 동안 여러 번 반복되었지만 가장 가까운 것은 다음과 같은 끌기 전용 사각형을 잡는 예제입니다 (나는 'this'의 사용을 도용 한 것으로 의심됩니다). .

var margin = {top: 10, right: 10, bottom: 30, left: 10}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var rectangles = d3.range(20).map(function() { 
 
    return { 
 
    x: Math.round(Math.random() * (width)), 
 
    y: Math.round(Math.random() * (height)) 
 
    }; 
 
}); 
 

 
var color = d3.scaleOrdinal(d3.schemeCategory20); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom); 
 

 
var group = svg.append("g") 
 
    .data(rectangles) 
 
    .attr("transform", 
 
    "translate(" + margin.left + "," + margin.top + ")") 
 
     .call(d3.drag() 
 
     .on("start", dragstarted) 
 
     .on("drag", dragged) 
 
     .on("end", dragended)); 
 

 
group.selectAll("rect") 
 
    .data(rectangles) 
 
    .enter().append("rect") 
 
    .attr("x", function(d) { return d.x; }) 
 
    .attr("y", function(d) { return d.y; }) 
 
    .attr("height", 60) 
 
    .attr("width", 30) 
 
    .style("fill", function(d, i) { return color(i); }); 
 

 
group.selectAll("text") 
 
    .data(rectangles) 
 
    .enter().append("text") 
 
    .attr("x", function(d) { return d.x; }) 
 
    .attr("y", function(d) { return d.y; }) 
 
     .attr("text-anchor", "start") 
 
     .style("fill", "steelblue") 
 
     .text("Close"); 
 

 
function dragstarted(d) { 
 
    d3.select(this).raise().classed("active", true); 
 
} 
 

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

 
function dragended(d) { 
 
    d3.select(this).classed("active", false); 
 
}

.active { 
 
    stroke: #000; 
 
    stroke-width: 2px; 
 
} 
 

 
.rect { 
 
    pointer-events: all; 
 
    stroke: none; 
 
    stroke-width: 40px; 
 
}

<script src="//d3js.org/d3.v4.min.js"></script>

나는 가까운 아날로그 인 대답 here 당 코드를 구현하려고했으나 힘 다이어그램에서 이동과 관련된 변화뿐만 아니라 저를 격파했다.

모든 안내에 감사드립니다. 나는 근본적인 무언가를 놓치고있는 것처럼 느껴진다.

Answer 1

코드를 약간 수정했습니다. 나는 사각형과 텍스트를 그룹화하고 드래그 속성을 그룹에 추가했습니다. 따라서 드래그하면 텍스트와 사각형이 모두 싱크대로 이동합니다. 이 도움이

\t var margin = {top: 10, right: 10, bottom: 30, left: 10}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var rectangles = d3.range(10).map(function() { 
 
    return { 
 
    x: Math.round(Math.random() * (width)), 
 
    y: Math.round(Math.random() * (height)) 
 
    }; 
 
}); 
 

 
var color = d3.scaleOrdinal(d3.schemeCategory20); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom); 
 

 
var group = svg.selectAll('g') 
 
\t .data(rectangles).enter().append("g").attr("transform", 
 
    "translate(" + margin.left + "," + margin.top + ")") 
 
     .call(d3.drag() 
 
     .on("start", dragstarted) 
 
     .on("drag", dragged) 
 
     .on("end", dragended)); 
 

 
group.append("rect") 
 
    .attr("x", function(d) { return d.x; }) 
 
    .attr("y", function(d) { return d.y; }) 
 
    .attr("height", 60) 
 
    .attr("width", 30) 
 
    .style("fill", function(d, i) { return color(i); }); 
 
\t 
 
group.append("text") 
 
    .attr("x", function(d) { return d.x; }) 
 
    .attr("y", function(d) { return d.y; }) 
 
     .attr("text-anchor", "start") 
 
     .style("fill", "steelblue") 
 
     .text("Close"); \t 
 
\t \t 
 
function dragstarted(d) { 
 
    d3.select(this).raise().classed("active", true); 
 
} 
 

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

 
function dragended(d) { 
 
    d3.select(this).classed("active", false); 
 
}

.active { 
 
    stroke: #000; 
 
    stroke-width: 2px; 
 
} 
 

 
.rect { 
 
    pointer-events: all; 
 
    stroke: none; 
 
    stroke-width: 40px; 
 
}

<script src="//d3js.org/d3.v4.min.js"></script>

희망.

Answer 2

그룹을 그룹화하고 이동할 수있는 다른 방법을 시도해 볼 수도 있습니다.

var margin = {top: 10, right: 10, bottom: 30, left: 10}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var rectangles = d3.range(10).map(function() { 
 
    return { 
 
     x: Math.round(Math.random() * (width)), 
 
     y: Math.round(Math.random() * (height)) 
 
    }; 
 
}); 
 

 
var color = d3.scaleOrdinal(d3.schemeCategory20); 
 

 
var svg = d3.select("body").append("svg") 
 
      .attr("width", width + margin.left + margin.right) 
 
      .attr("height", height + margin.top + margin.bottom); 
 

 
var group = svg.selectAll('g') 
 
       .data(rectangles) 
 
       .enter().append("g") 
 
       .attr("transform",function(d) { 
 
         return "translate(" + (margin.left + d.x) + "," + (margin.top + d.y) + ")" 
 
       }) 
 
       .call(d3.drag() 
 
         .on("start", dragstarted) 
 
         .on("drag", dragged) 
 
         .on("end", dragended)); 
 

 
group.append("rect") 
 
    .attr("height", 60) 
 
    .attr("width", 30) 
 
    .style("fill", function(d, i) { return color(i); }); 
 

 
group.append("text") 
 
    .attr("text-anchor", "start") 
 
    .style("fill", "steelblue") 
 
    .text("Close"); 
 

 
function dragstarted(d) { 
 
    d._drag = { 
 
     distance:0, 
 
     threshold:2, 
 
     initiated: false 
 
    }; 
 
} 
 

 
function dragged(d) { 
 
    if (!d._drag.initiated) { 
 
     d._drag.initiated = true; 
 
     d3.select(this).raise().classed("active", true); 
 
    } 
 
    d._drag.distance += d3.event.dx * d3.event.dx + d3.event.dy * d3.event.dy; 
 
    d.x = d3.event.x; 
 
    d.y = d3.event.y; 
 
    d3.select(this).attr('transform', 'translate('+[d.x,d.y]+')'); 
 
} 
 

 
function dragended(d) { 
 
    if (d._drag.distance < d._drag.threshold) { 
 
     d3.select(window).on('click.drag', null); 
 
     return; 
 
    } 
 
    d3.select(this).classed("active", false); 
 
}

.active { 
 
    stroke: #000; 
 
    stroke-width: 2px; 
 
} 
 

 
.rect { 
 
    pointer-events: all; 
 
    stroke: none; 
 
    stroke-width: 40px; 
 
}

<script src="//d3js.org/d3.v4.min.js"></script>