javascript - d3 : follow mouse coordinates?

Question

我试图让一个元素跟随鼠标(在本例中是一组三行)。 d3.mouse(this) 调用工作正常，但 draw_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]},
        })
}

Answer 1

在初次调用draw_lines函数期间，您创建了3条线。您应该在后续调用中更新线路属性，或者仅删除旧线路并使用最新属性创建新线路。

这是演示。

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]
  ]
  //Selects all existing lines(Initially this will return empty array)
  var lines = svg.selectAll("line");
  
  //Binds the data array, create lines if does not exists 3(Data array length) lines (Creates the new lines only during the intial call to the function)
  lines.data(data).enter().append("line");
 
  //Updates the attributes using data bonded
  lines.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]
    },
  })
}

svg {
  background-color: grey;
}
line {
  stroke: white;
  stroke-width: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>