Соедините два круга с событием мыши.

Question

Я хочу связать два или более круга с событием мыши. У меня есть код

 var jsonCircles = [ 
      { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" , "class":"circleFirst"}, 
      { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple" , "class": "circleSecond"}, 
      { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red", "class":"circleThird"}]; 

    var spaceHeight = 500; 
    var spaceWidth = 500; 
    var keep = false, 
     mouseStart = null, path = null; 

var dataObj = {}; 
var locationsObj = "locations"; 
dataObj[locationsObj] = {}; 
dataObj[locationsObj].source = []; 
dataObj[locationsObj].target = []; 


    var drag = d3.behavior.drag() 
     .on("dragstart", function() { 
      d3.event.sourceEvent.stopPropagation(); 
     }) 
     .on("drag", dragmove); 

    function dragmove(d) 
    { 
     //boundary of svg area 
     var x = Math.max(0, Math.min(spaceWidth - 100, d3.event.x)); 
     var y = Math.max(0, Math.min(spaceHeight - 50, d3.event.y)); 
     d3.select(this).attr("transform", "translate(" + x + "," + y + ")"); //main objects 
    } 


    var svgContainer = d3.select("body").append("svg") 
             .attr("width", spaceWidth) 
             .attr("height", spaceHeight) 
             .on("mousedown", mousedown) 
             .on("mousemove", mousemove) 
             .on("mouseup", mouseup); 


    var circles = svgContainer.selectAll("circle") 
           .data(jsonCircles) 
           .enter() 
           .append("circle"); 

    var circleAttributes = circles 
          .attr("cx", function (d) { return d.x_axis; }) 
          .attr("cy", function (d) { return d.y_axis; }) 
          .attr("r", function (d) { return d.radius; }) 
          .attr("class", function(d) { return d.class;}) 
          .style("fill", function(d) { return d.color; }) 
          .call(drag); 




    function mousedown() 
    { 
     path = svgContainer.append("path") 
      .style("stroke", "gray") 
      .style("stroke-width", "2px") 
      .style("fill", "none"); 
     keep = true; 
     mouseStart = d3.mouse(this); 

    } 

    function mouseup() 
    { 
     keep= false; 
    } 

    function mousemove() 
    { 
     if(keep) 
     { 
      var mouseEnd = d3.mouse(this); 
      var dx = mouseStart[0] - mouseEnd[0], 
       dy = mouseStart[1] - mouseEnd[1], 
       dr = Math.sqrt(dx * dx + dy*dy); 
      path.attr("d", "M" + 
       mouseStart[0] + "," + 
       mouseStart[1] + "A" + 
       dr + "," + dr + " 0 0,1 " + 
       mouseEnd[0] + "," + 
       mouseEnd[1]); 
     } 

    } 

1) Как подключить их в соответствии с классами? Я буду вводить информацию о классе в dataObj, как вы можете видеть в коде.

enter image description here

2) Мне нужно только провести между два объекта не в области SVG. Когда я рисую строку в пространстве svg, ее нужно преобразовать в цвет фона. Есть ли какие-либо предложения для этого? (*)

• Я использую функцию mousemove для рисования кривой или линии. Когда я перетаскиваю мышь из одного круга в другой, нужно нарисовать линию, если она находится в радиусе другого круга. Если это не так, линии не будет. Вы можете видеть на следующем рисунке. Дополнительная информация: круги будут перетаскиваемыми кругами. Поэтому, когда я выбираю и перемещаю круги, нужно обновить путь.

enter image description here

Спасибо заранее,

Answer 1

Вот мой взгляд на него. Попробуйте нажать на каждый из кругов.

https://jsfiddle.net/guanzo/f5c22h08/2/

Не уверен, что вы имели в виду «Когда я рисую линию в пространстве SVG она должна быть преобразовать в цвет фона», так что я взял его в виду цвета фона щелкнутого круга.

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

function click(circle){ 
    d3.selectAll('line').remove() 
    d3.selectAll('circle[class^=circle]') 
    .filter(d=>d.class != circle.class) 
    .each(d=>{ 
     svg.append('line') 
      .attr({ 
      x1:circle.x_axis, 
      y1:circle.y_axis, 
      x2:d.x_axis, 
      y2:d.y_axis, 
      stroke:circle.color 
      }) 
    }) 
}