Question

我想改变网格中瓷砖的颜色，因为它们被'拖过'。使用d3和svg创建网格。我尝试了几种不同的方法，但收效甚微。这是我最近一次尝试的代码：

var w = 960,
h = 520,
z = 40,
x = w / z,
y = h / z;

var svg = d3.select("#grid").append("svg")
    .attr("width", w)
    .attr("height", h);

var grid = d3.range(y).map(function(dy) {
  return d3.range(x).map(function(dx) {
  return {x: dx, y: dy};
  });
});



var g = svg.selectAll("g")
    .data(grid)
  .enter().append("g")                 // Group each row's rects in a g
    .selectAll("rect")                 // Do a nested selection
    .data(function(d) { return d; })   // Bind the sub-array for this row
      .enter().append("rect")
      .attr("width", z)
      .attr("height", z)
      .attr("start", false)
      .attr("clicked", false)
      .attr("previous", null)
      .attr('x', function(d) { return d.x * z; })
      .attr('y', function(d) { return d.y * z; })

      .on("dragover", draggedOver)
      .style("stroke", "rgb(6,120,155)")
      .style("stroke-width", 2)
      .style("fill", "rgb(255, 255, 255)");

function draggedOver(){
d3.select(this).transition().style("fill","green");
}

重点是“on（'dragover'）”事件。提前致谢

dragenter和dragleave事件监听器D3

0 个答案: