D3 Label To Draggable Circle

I'm trying to use d3 to draw circle elements with labels next to them. I should be able to drag a circle with a label following next to it. Any advice is appreciated. https://js

Solution 1:

Since this is D3 v3, the correct function is:

d3.behavior.drag()

Besides that, to drag the circle with the corresponding text, a better approach would be appending both circle and text to a group:

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

And call the drag to that group:

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

Here is the updated fiddle: https://jsfiddle.net/gerardofurtado/o3yg8sq1/4/