如何在不知道x和y位置的2个元素之间建立动态线？ [英] How can I make a dynamic line between 2 elements not knowing their positions in x and y?

问题描述

我有两个元素，分别是圆和矩形，它们分别包含在不同的<$ c $中c> g 元素，并且它们的位置相对于其父元素，即 g 元素。在这种情况下，我的圆和我的矩形没有定义的 x 或 y 头寸。这就是为什么我问这个问题的原因，我想知道如何在不完全知道它们在svg中的绝对位置的情况下制作一条1到2个元素的线。

I have two elements, a circle and a rectangle that are each contained within a different g element, and their positions are relative to their parent, which is the g element. in this case, my circle and my rectangle have no defined x or y position. that's why I asked this question, I want to know how I can make a line one to 2 elements where I totally don't know their absolute positions within the svg.

var svg=d3.select("svg");
var g1=svg.append("g").attr("transform","translate(50,100)");
var g2=svg.append("g").attr("transform","translate(500,250)");

var rect=g1.append("rect").attr("id","myrect").attr("width",100).attr("height",100).attr("x",0).style("fill","blue");
var circle=g2.append("circle").attr("id","mycircle").attr("r",30).style("fill","red");

let origin= d3.select("#myrect");
let destiny= d3.select("#mycircle");
/*svg.append("line") 
  .style("stroke", "black") // colour the line
  .attr("x1", origin.x) // x position of the first end of the line
  .attr("y1", origin.y) // y position of the first end of the line
  .attr("x2", destiny.x) // x position of the second end of the line
  .attr("y2", destiny.y); // y position of the second end of the line
}*/
//.getBoundingClientRect()

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg style="width:1000px;height:500px; border:1px solid red;"></svg>

推荐答案

对于每个形状，请使用数据绑定 > getClientBoundingRect（）获取每个元素的位置，高度和宽度。我们绑定到属性。

For each shape, do a data binding using getClientBoundingRect() to get the position, height and width of each element. We bind to an attribute.

source.datum(source.node().getBoundingClientRect())
.attr('nodeX', d=>d.x + d.width/2)
.attr('nodeY', d=>d.y + d.height/2)

target.datum(target.node().getBoundingClientRect())
.attr('nodeX', d=>d.x + d.width/2)
.attr('nodeY', d=>d.y + d.height/2)

var svg=d3.select("svg");
var g1=svg.append("g").attr("transform","translate(50,100)");
var g2=svg.append("g").attr("transform","translate(500,250)");

var rect=g1.append("rect").attr("id","myrect").attr("width",100).attr("height",100).attr("x",0).style("fill","blue");
var circle=g2.append("circle").attr("id","mycircle").attr("r",30).style("fill","red");

let source = d3.select("#myrect");
let target = d3.select("#mycircle");

source.datum(source.node().getBoundingClientRect())
.attr('nodeX', d=>d.x + d.width/2)
.attr('nodeY', d=>d.y + d.height/2)

target.datum(target.node().getBoundingClientRect())
.attr('nodeX', d=>d.x + d.width/2)
.attr('nodeY', d=>d.y + d.height/2)

svg.append("line") 
  .style("stroke", "black") // colour the line
  .attr("x1", source.attr('nodeX')) // x position of the first end of the line
  .attr("y1", source.attr('nodeY')) // y position of the first end of the line
  .attr("x2", target.attr('nodeX')) // x position of the second end of the line
  .attr("y2", target.attr('nodeY')); // y position of the second end of the line

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg style="width:1000px;height:500px; border:1px solid red;"></svg>

这篇关于如何在不知道x和y位置的2个元素之间建立动态线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！