Блог

Я пытаюсь использовать 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);
    }
  

Поскольку это 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")
  

И вызовите перетаскивание в эту группу:

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

Вот обновленная скрипка: https://jsfiddle.net/gerardofurtado/o3yg8sq1/4 /