Question

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

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

   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/

Answer 1

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

您已经有一个第一个圈子，现在您将其添加到 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)

Answer 2

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

注意：
  圆圈为我绘制它的一点嘲讽，它绘制矩形，想象你   首先绘制矩形，然后在其中绘制一个圆圈，这就是为什么，它   它的每个角度都有一个看起来像圆形但有点不同的bug   反应角，

我认为它可以通过一些计算来解决，但对不起我不知道任何一个   该

＆＃13;

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

＆＃13;

svg {
    border: 1px solid red;
}

line {
    stroke: steelblue;
    stroke-width: 2px;
    stroke-linecap: round;
}

＆＃13;

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

＆＃13;

如何在两个圆圈之间动态绘制线条

2 个答案: