gpt4 book ai didi

javascript - 如何在两个或多个点之间画线? (积分可以动态改变)

转载 作者:行者123 更新时间:2023-11-28 00:15:38 27 4
gpt4 key购买 nike

我对 d3.js 很陌生,需要一些帮助。我试图在两点之间画一条线。我的问题是一切都应该是动态的,即我们通常遵循告诉 x1 的规则, x2 , y1y3职位。这是一个例子

var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);

var line = canvas.append("line")
.attr("x1", 0) // x1 position
.attr("y1", 100) // y1 position
.attr("x2", 400) // x2 position
.attr("y2", 400) // y2 position
.attr("stroke", "green")
.attr("stroke-width", 10);

我希望动态创建这些位置,即当我单击网页时,应该创建一个点并将其从该位置拖动并将其放置在其他位置。我怎样才能做到这一点?

谢谢

最佳答案

A line is a simple line between two points and is described by four required attributes.

x1: The x position of the first end of the line as measured from the left of the screen.
y1: The y position of the first end of the line as measured from the top of the screen.
x2: The x position of the second end of the line as measured from the left of the screen.
y2: The y position of the second end of the line as measured from the top of the screen.

The following is an example of the code section required to draw a line;

holder.append("line") // attach a line
.style("stroke", "black") // colour the line
.attr("x1", 100) // x position of the first end of the line
.attr("y1", 50) // y position of the first end of the line
.attr("x2", 300) // x position of the second end of the line
.attr("y2", 150); // y position of the second end of the line

This will produce a line as follows;

enter image description here

The line extends from the point 100,50 to 300,150 (x1,y1 to x2,y2).

了解更多详情refer

关于javascript - 如何在两个或多个点之间画线? (积分可以动态改变),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30478123/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com