Подключение двух прямоугольников в d3js

Question

Я пытаюсь соединить два прямоугольника с линией в d3. Поведение должно быть таким:

Предположим, у нас есть прямоугольники A & B. Мы должны сначала щелкнуть прямоугольник, и когда мы переместим мышь, линия должна перемещаться с помощью мыши. Когда я нажимаю B. Линия должна соединяться A & B.

Это то, что у меня есть сейчас. Я не могу обновить строку. Он продолжает добавлять новые объекты линии.

<svg id="main" width="500" height="500" style="background-color: red"> 
    <rect id="a" x="100" y="100" height="50" width="50" style="fill: blue"></rect> 
    <rect id="b" x="400" y="400" height="50" width="50" style="fill: blue"></rect> 
</svg> 

<script> 


    d3.select("#a") 
      .on('click', function(d){ 

       var elem = d3.select(this); 
       var mouseLoc = d3.mouse(this); 

       d3.select("#main") 
         .on('mousemove', function(d){ 

//       d3.select('#li').remove(); 
          d3.select('#main').append("line") 
            .attr('id', 'li') 
            .attr('x1', elem.attr('x')) 
            .attr('y1', elem.attr('y')) 
            .attr('x2', d3.mouse(this)[0]+5) 
            .attr('y2', d3.mouse(this)[1]+5) 
            .attr("stroke", function (d) { return "black"; }) 
            .style("stroke-width", function(d) { return "1 px"; }); 

         }) 

       ; 

       console.log('clicked'); 
      }); 





</script> 

Answer 1

Проблема в вашем коде заключается в том, что вы добавляете новые строки при перемещении мыши, но вы должны просто обновить строку.

Я написал скрипку для требования, которое вы разместили, и добавил комментарии для вашей помощи.

http://jsfiddle.net/cyril123/fy4cv1ab/6/

d3.select("#a").on('mousedown', function(d){ 
 
    d3.select("#c").style("display","");//make the line visible when mouse click is down. 
 
}); 
 
d3.select("#b").on('mouseup', function(d){ 
 
    d3.select('#c') 
 
     .attr('x2', 400) 
 
     .attr('y2', 400); 
 
//remove all the listeners as we have made the connection line  
 
    d3.select("#main").on('mousemove',null); 
 
    d3.select("#a").on('mousedown',null); 
 
    d3.select("#b").on('mouseup',null); 
 
}); 
 
d3.select("#main").on('mousemove', function(d){ 
 
    //on mouse move update the line. 
 
    var mouseLoc = d3.mouse(this); 
 
    d3.select('#c') 
 
     .attr('x2', mouseLoc[0]-5) 
 
     .attr('y2', mouseLoc[1]-5); 
 

 
});

<svg id="main" width="500" height="500" style="background-color: white"> 
 
    <rect id="a" x="100" y="100" height="50" width="50" style="fill: blue"></rect> 
 
    <rect id="b" x="400" y="400" height="50" width="50" style="fill: blue"></rect> 
 
    <line id="c" x1="100" y1="100" y2="400" x2="400" style="stroke:rgb(255,0,0);stroke-width:2;display:none"></line> 
 
</svg>