javascript – 为什么d3.js组元素在第一次拖动时会跳跃？

2023年9月27日 463次阅读

我需要在其中创建一个具有某些形状(如rect,circle,…)的d3组,​​并且它必须是可拖动的.拖动工作,但拖动开始时,形状是“跳跃”.我知道我需要像.attr(“x”,d.x = d3.event.x)这样的东西.但后来我得到一个错误,“d”未定义.我怎样才能修复“跳跃”？

这是一个非常简单的代码：

var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%");

rectGroup();

function rectGroup() {
var group = svg.append('g')
    .attr("class", "group")
    .call(d3.drag()
        .on("drag", dragged));

group.append("rect")
    .data([{ x: 200, y: 200, width: 100 , height: 100}])
    .attr('class', 'rect')
    .attr("x", function(d) { return d.x; })
    .attr('y', function(d) { return d.y; })
    .attr('width', function(d) { return d.width; })
    .attr('height', function(d) { return d.height; });
}

function dragged(d) {
d3.select(this).select("rect").attr("x", d3.event.x)
d3.select(this).select("rect").attr("y", d3.event.y)
}

最佳答案 你在调用群组上的拖累.但是,您在拖动的函数中使用矩形的x和y属性.

您必须决定调用哪一个,矩形或组,并且在此决定之后您必须相应地更改您的代码.

例如,如果要保持对组的拖动,则必须使用translate：

function dragged(d) {
    d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + 
    "," + (d.y = d3.event.y) + ")")
}

设置组的x和y数据后.

这是演示：

var svg = d3.select("body").append("svg")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 960 600")
  .attr("width", "100%")
  .attr("height", "100%");

rectGroup();

function rectGroup() {
  var group = svg.append('g')
    .datum({
      x: 0,
      y: 0
    })
    .attr("class", "group")
    .call(d3.drag()
      .on("drag", dragged));

  group.append("rect")
    .data([{
      x: 200,
      y: 200,
      width: 100,
      height: 100
    }])
    .attr('class', 'rect')
    .attr("x", function(d) {
      return d.x;
    })
    .attr('y', function(d) {
      return d.y;
    })
    .attr('width', function(d) {
      return d.width;
    })
    .attr('height', function(d) {
      return d.height;
    });
}

function dragged(d) {
  d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")")
}
<script src="https://d3js.org/d3.v4.min.js"></script>
点赞