如何在两个圆之间动态画一条线答案

【问题标题】：How to draw a line dynamically between two circles如何在两个圆之间动态画一条线
【发布时间】：2017-08-30 12:26:42
【问题描述】：

我用下面的代码画了两个圆圈，我必须在这两个圆圈之间画一条线，但是当我开始从第一个圆圈画一条线时，棘手的一点是应该有第二个圆圈，然后只有它应该画否则它不应该画线，反之亦然。如果我点击圈外，那么它也不应该画线

在我下面的代码或小提琴中检查它我可以画一条线我的条件不工作

   var line;

var svg = d3.select("body").append("svg") 
    .attr("width", 600)
    .attr("height", 400).on("mousedown", mousedown).on("mouseup", mouseup);

function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);

    svg.on("mousemove", mousemove);
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    svg.on("mousemove", null);
}

var inputs = [
{ "x" : 200, "y" : 150,  r : 50},
{ "x" : 300,  "y" : 250,  r : 50},
]

         svg.selectAll("circle").data(inputs).enter().append("circle")

         .attr("r", function(d, i){ return d.r })
         .attr("cx", function(d, i){ return d.x })
         .attr("cy", function(d, i){ return d.y })            
         .attr("stroke", "red")
         .attr("fill", "white")

这是我的小提琴：https://jsfiddle.net/34j6pkn9/1/

【问题讨论】：

也许这会有所帮助bl.ocks.org/cjrd/6863459
没有错误但没有画线

标签： d3.js svg

【解决方案1】：

也许这会对你有所帮助，但它远不是一个好的解决方案，但它确实有效

注意：
圆圈为我画出它的一点点可笑，它画出矩形，想象你先画矩形，然后在里面画一个圆圈，这就是为什么，它它的每个角度都有虫子，看起来像圆形，但不同的是它一个反应角，

我认为可以通过一些计算来解决，但抱歉我不知道那个

var line;
var mx =0
var my =0
var inputs = [
{ "x" : 200, "y" : 150,  r : 50},
{ "x" : 300,  "y" : 250,  r : 50},
]
var vis = d3.select("body").append("svg") 
    .attr("width", 600)
    .attr("height", 400)
    .on("mouseup", mouseup);


function mousedown() {
    var m = d3.mouse(this);

    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);
     mx = m[0]
     my = m[1]
    vis.on("mousemove", mousemove);
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
 var m = d3.mouse(this);
  //console.log(mx-m[0],my-m[1])
 inputs.forEach(function(d,i){
 if(m[0]<(d.x+d.r)&& m[0]>(d.x-d.r)&&m[1] <(d.y+d.r)&& m[1]>(d.y-d.r)){
  if(mx<(d.x+d.r)&& mx>(d.x-d.r)&&my <(d.y+d.r)&& my>(d.y-d.r)){
 
 }else{
  vis.on("mousemove", null);
 }
   
  }
 })
   
}



         vis.selectAll("circle").data(inputs).enter().append("circle")
         
         .attr("r", function(d, i){ return d.r })
         .attr("cx", function(d, i){ return d.x })
         .attr("cy", function(d, i){ return d.y })            
         .attr("stroke", "red")
         .attr("fill", "white")
         .on("mousedown", mousedown).on("mouseup", mouseup);

svg {
    border: 1px solid red;
}

line {
    stroke: steelblue;
    stroke-width: 2px;
    stroke-linecap: round;
}

<html>
<head>
  <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head><body>
</body>

【讨论】：

【解决方案2】：

每个圆圈后面都会有一个线条（第一个除外）。每条线将连接每两个连续圆圈的中心。

你现在有第一个圆圈，你现在将它添加到你的svg中，但是你将如何找到前一个圆圈？您可以简单地找到第一个圈子的previousElementSibling。但是，这里有一个陷阱，注意每个圆圈后面都有一条线。因此，请务必检查 previousElementSibling 的名称，如果它是“行”，请再次查找 previousElementSibling。

// At this point, you've just appended the circle in 
// 'svg' based on where the mouse is etc.

// Now, find the previous circle.
const parentNode = document.querySelector("svg");
// 'thisCircle' is the one you're appending in svg now.
const thisCircle = parentNode.lastElementChild;

// Previous sibling of this circle. 
const previousSibling = thisCircle.previousElementSibling;
// If this is the first circle drawn, then do nothing- return
if (!previousSibling) {
  return;
}

// Check if previous sibling is indeed 'circle' and not 'line'
const nodeNameOfPreviousSiblig = previousSibling.nodeName;
let previousCircle = previousSibling;
// If the previous node is 'line' go one more step upwards- it must be a circle. Since pattern => 1 circle, 1 line.
if (nodeNameOfPreviousSiblig == 'line') {
  previousCircle = previousSibling.previousElementSibling;
}

// center of the previous circle.
const xCoordOPrevCircleCenter = previousCircle.getAttribute("cx");
const yCoordOPrevCircleCenter = previousCircle.getAttribute("cy");

现在，最后，添加连接这两个连续圆心的线：

svg.append('line')
  .attr('x1', xCoordOThisCircleCenter)
  .attr('y1', yCoordOThisCircleCenter)
  .attr('x2', xCoordOPrevCircleCenter)
  .attr('y2', yCoordOPrevCircleCenter)

【讨论】：