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

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

或拨弄检查我可以在画一条线我的条件是不工作

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/

来源

2017-08-30 mantelinga r

mybe这将帮助https://bl.ocks.org/cjrd/6 863459 – KEKUATAN

没有错误，但行不是绘图 –

也许这会帮助你，但它远不是一个很好的解决方案，但它的工作

注：
圆圈绘制其位ridiculus对我来说，它绘制矩形，想象你绘制矩形第一，那么你画的这里面的圆，它的原因，它有错误的，看起来像圆，但difinetly其一个reactangle它的每一个角度，

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

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>

来源

2017-09-04 05:12:11 KEKUATAN

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

回答

相关问题