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行。您应该更新后续调用中的行属性，或者只删除旧行并使用最新属性创建新行。

这是演示。

＆＃13;

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]
    },
  })
}

＆＃13;

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

＆＃13;

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

＆＃13;

d3：按照鼠标坐标？

1 个答案: