Question

我试图创建在页面上随机移动的动态线，我还想用鼠标移动移动线的尖端，所以我尝试在＆＃34; linedata＆＃34;中添加另一个数据。变量，但它只渲染1行。

下面的代码中只有1个数据在＆＃34; linedata＆＃34;数组，我试过像

这样的东西

container

 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) ];

Answer 1

您可以创建一条线并通过按鼠标指针更改x1 / y1 / x2 / y2来移动线条。查看函数 mousemove

要生成随机行，请参阅函数 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);

完整的工作代码here

希望这有帮助！

如何动态添加另一行？

1 个答案: