Javascript d3：跟随鼠标坐标？

我试图使一个元素跟随鼠标（在本例中是一组三行）。

d3.mouse（this）

调用工作正常，但是

draw\u lines

函数不会随着后续调用而更新；这些线只画了一次

我做错了什么

var w = 100, h = 100

var svg = d3.select('body').append("svg")
    .attr("width", w)
    .attr("height", h)
    .on('mousemove', function() {
        var coordinates = d3.mouse(this)
        draw_lines(coordinates)
    })

function draw_lines(coordinates) {
    var x = coordinates[0]
    var y = coordinates[1]

    var data = [
        [x, y, x+20, y-40],
        [x+10, y, x+30, y-40],
        [x+20, y, x+40, y-40]
    ]

    var lines = svg.selectAll("line")
        .data(data)
        .enter().append("line")
        .attr({
            "x1": function(d) {return d[0]},
            "y1": function(d) {return d[1]},
            "x2": function(d) {return d[2]},
            "y2": function(d) {return d[3]},
        })
}

---

在最初调用draw_lines函数的过程中，您创建了3条线。要么在后续调用中更新行属性，要么删除旧行并创建具有最新属性的新行

这是演示

var w=100，
h=100
var svg=d3。选择（'body'）。追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.on（'mousemove'，function（）{
变量坐标=d3.鼠标（此）
画线（坐标）
})
函数绘制线（坐标）{
var x=坐标[0]
变量y=坐标[1]
风险值数据=[
[x，y，x+20，y-40]，
[x+10，y，x+30，y-40]，
[x+20，y，x+40，y-40]
]
//选择所有现有行（最初将返回空数组）
var lines=svg。选择全部（“行”）；
//绑定数据数组，如果不存在则创建行3（数据数组长度）行（仅在函数的初始调用期间创建新行）
line.data（data.enter（）.append（“line”）；
//使用数据绑定更新属性
lines.attr({
“x1”：功能（d）{
返回d[0]
},
“y1”：功能（d）{
返回d[1]
},
“x2”：功能（d）{
返回d[2]
},
“y2”：功能（d）{
返回d[3]
},
})
}

svg{
背景颜色：灰色；
}
线{
笔画：白色；
笔画宽度：2px；
}

---

在最初调用draw_lines函数期间，您创建了3条线。要么在后续调用中更新行属性，要么删除旧行并创建具有最新属性的新行

这是演示

var w=100，
h=100
var svg=d3。选择（'body'）。追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.on（'mousemove'，function（）{
变量坐标=d3.鼠标（此）
画线（坐标）
})
函数绘制线（坐标）{
var x=坐标[0]
变量y=坐标[1]
风险值数据=[
[x，y，x+20，y-40]，
[x+10，y，x+30，y-40]，
[x+20，y，x+40，y-40]
]
//选择所有现有行（最初将返回空数组）
var lines=svg。选择全部（“行”）；
//绑定数据数组，如果不存在则创建行3（数据数组长度）行（仅在函数的初始调用期间创建新行）
line.data（data.enter（）.append（“line”）；
//使用数据绑定更新属性
lines.attr({
“x1”：功能（d）{
返回d[0]
},
“y1”：功能（d）{
返回d[1]
},
“x2”：功能（d）{
返回d[2]
},
“y2”：功能（d）{
返回d[3]
},
})
}

svg{
背景颜色：灰色；
}
线{
笔画：白色；
笔画宽度：2px；
}

---

效果很好。非常感谢。显然，我还有很多东西要学。效果很好。非常感谢。我显然还有很多东西要学。