Question

我需要在其中创建一个具有某些形状（如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)
}

Answer 1

您正在呼叫群组中的drag。不过，您已使用x函数中矩形的y和dragged属性。

您必须决定调用哪个drag，矩形或组，并且在做出此决定后，您必须相应地更改代码。

例如，如果您想对组进行拖动，则必须使用translate：

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

为论坛设置x和y数据后。

以下是演示：

＆＃13;

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) + ")")
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

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

1 个答案: