D3 드래그 가능한 서클에 레이블

Question

d3을 사용하여 옆에 레이블이있는 원 요소를 그려 봅니다. 옆에 레이블이있는 원을 드래그 할 수 있어야합니다.

모든 조언을 주시면 감사하겠습니다. 이 D3의 V3를하기 때문에 https://jsfiddle.net/o3yg8sq1/2/

const svg = d3.select('svg'), 
     width = +svg.attr('width'), 
     height = +svg.attr('height'); 

    const node = svg.append('g') 
     .attr('class', 'nodes') 
     .selectAll('circle') 
     .data([{1:1},{2:2}]) 
     .enter().append('circle') 
     .attr('r', 15) 
     .attr('cx', function (d, i) { return Math.random() * 100; }) 
     .attr('cy', function (d, i) { return Math.random() * 100; }) 
     .call(d3.drag() 
      .on('drag', dragmove)); 

    svg.selectAll('.nodes') 
     .append('text') 
     .text(function(d){return 'test';}) 

    function dragmove(d) { 
     d3.select(this).attr('cx', d3.event.x); 
     d3.select(this).attr('cy', d3.event.y); 
    } 

Answer 1

, 정확한 기능은 다음과 같습니다 게다가

d3.behavior.drag() 

, 더 나은 접근 방식에 모두 circle 및 text를 추가 할 것, 해당 텍스트로 원을 드래그 그룹 :

const node = svg.selectAll('.g') 
    .data([{1:1},{2:2}]) 
    .enter().append('g').attr("transform", function(){ 
     return "translate(" + Math.random() * 100 + "," 
     + Math.random() * 100 + ")" 
}); 

node.append("circle").attr('r', 15); 

node.append('text') 
    .attr("dx", 16) 
    .text("test") 

그리고 그 그룹에 드래그 전화 :

https://jsfiddle.net/gerardofurtado/o3yg8sq1/4/

: 여기

node.call(d3.behavior.drag() 
    .on('drag', dragmove)); 

function dragmove(d) { 
    d3.select(this).attr("transform", function(){ 
     return "translate(" + d3.event.x + "," + d3.event.y + ")" 
    }) 
} 

업데이트 된 바이올린입니다