D3ドラッグ可能なサークルにラベルを付ける

Question

d3を使用して、サークルエレメントの隣にラベルが表示されています。 ラベルの隣にラベルが付いた円をドラッグできるはずです。

アドバイスありがとうございます。 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のV3であるので、正しい関数である：

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/