javascript - 通过鼠标单击事件连接两个圆

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