如何动态添加另一行？ [英] how do I add another line dynamically?
本文介绍了如何动态添加另一行？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建动态行以在页面上随机移动，我也想通过鼠标移动来移动行的尖端，因此我尝试在 linedata变量中添加另一条数据，但它仅呈现1条线。 / p>
下面的代码在 linedata数组中只有1个数据，我尝试过类似的操作
var random = {
a：Math.floor（Math.random（）* randNum），
b：Math.floor（Math.random（）* randNum），
} ;
linedata = [ M 0 0 L 200 +（100 + random.a），
M 100 100 L 200 +（100 + random.b）];
< ;！DOCTYPE html>
< html>
< head>
< meta charset = UTF-8 />
< title> d3测试< / title>
< script src = https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js charset = utf-8>< / script>
< / head>
< body>
< script>
//宽度和高度
var w = 500;
var h = 50;
//创建SVG元素
var svg = d3.select（ body）
.append（ svg）
.attr（ width， w）
.attr（ height，h）;
var line = svg.append（ path）
.attr（ stroke， orange）
.attr（ stroke-width，7）
.attr（ fill， none）;
//全局数组
var linedata = [];
//随机乘数
var randNum = 50;
setInterval（function（）{
var random = {
a：Math.floor（Math.random（）* randNum），
};
linedata = [ M 0 0 L 200 +（100 + random.a）];
line.data（linedata）;
line.attr （ d，function（d）{
return d;
}）
}，10）；
解决方案
您可以创建一条线并通过根据鼠标指针更改x1 / y1 / x2 / y2来移动该线。请参见函数 mousemove
有关生成随机行的信息，请参见函数 generateLines
var svg = d3.select（ body）
.append（ svg）
.attr（ width，w）
.attr（ height，h）
.on（ mousemove，mousemove）;
函数generateLines（）{
var line = svg.append（ line）
.attr（ stroke， orange）
.attr（ stroke-width，7）
.attr（ class， line）
.attr（ x1，generateRandomPoints（））
.attr（ y1，generateRandomPoints （））
.attr（ x2，generateRandomPoints（））
.attr（ y2，generateRandomPoints（））
.attr（ fill， none）;
}
function mousemove（）{
var t = d3.mouse（this）;
svg.selectAll（。line）。attr（ x1，t [0]）。attr（ y1，t [1]）;
}
//创建随机点
函数generateRandomPoints（）{
return parseInt（Math.random（）* 500）;
}
//这将在间隔3秒后生成随机行
setInterval（function（）{
generateLines（）;
}，3000）;
完整的工作代码此处
希望这会有所帮助！
I'm trying to create dynamic line that randomly moves on the page, I also want to move the tip of the line with mouse movement so I tried adding another data in "linedata" variable but it only renders 1 line.
the code below only has 1 data in "linedata" array, I tried something like
var random = {
a: Math.floor(Math.random()*randNum),
b: Math.floor(Math.random()*randNum),
};
linedata = [ "M 0 0 L 200 " + (100+random.a),
"M 100 100 L 200 " + (100+random.b) ];
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>d3 test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
//Width and Height
var w = 500;
var h = 50;
//Create SVG Element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var line = svg.append("path")
.attr("stroke","orange")
.attr("stroke-width", 7)
.attr("fill","none");
//Global array
var linedata = [];
//random multiplier
var randNum = 50;
setInterval(function() {
var random = {
a: Math.floor(Math.random()*randNum),
};
linedata = [ "M 0 0 L 200 " + (100+random.a) ];
line.data(linedata);
line.attr("d", function(d) {
return d;
})
}, 10);
解决方案
You can create a line and move the line by changing the x1/y1/x2/y2 as per the mouse pointer. See the function mousemove
For generating random lines see function generateLines
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.on("mousemove", mousemove);
function generateLines() {
var line = svg.append("line")
.attr("stroke", "orange")
.attr("stroke-width", 7)
.attr("class", "line")
.attr("x1", generateRandomPoints())
.attr("y1", generateRandomPoints())
.attr("x2", generateRandomPoints())
.attr("y2", generateRandomPoints())
.attr("fill", "none");
}
function mousemove() {
var t = d3.mouse(this);
svg.selectAll(".line").attr("x1", t[0]).attr("y1", t[1]);
}
//make random points
function generateRandomPoints() {
return parseInt(Math.random() * 500);
}
//this will generate random lines after an interval of 3 secs
setInterval(function () {
generateLines();
}, 3000);
full working code here
Hope this helps!
这篇关于如何动态添加另一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
