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

查看:28
本文介绍了如何在不知道x和y位置的2个元素之间建立动态线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个元素,分别是矩形,它们分别包含在不同的<$ 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆