Question

我是D3 / Javascript的初学者。

我有一个有效的D3脚本，其中绘制了一堆path个元素，可以拖动它们。

但是，当我在其他地方添加看似无关的代码时，会设置数据的d.x和d.y（到其正确的值BTW），拖动会中断。元素跳跃，因此它开始离开一段距离，需要被拖回原来的位置。

（不受欢迎的＆＃34;跳跃＆＃34;是有序的，与鼠标坐标的线性变换一致）

＆＃34;犯罪＆＃34;似乎导致此行为的代码是：

hexdata.forEach(function(d) {
        d["x"] = grid_x(d);
        d["y"] = grid_y(d.grid_y);
      });

构造没有上述代码的节点和路径的代码是：

var node = svg.selectAll('g') 
        .data(hexdata) 
        .enter()
        .append("g")
        .call(d3.drag()
            .on("drag", dragged))
        .attr("class", "node");


node.append('path') 
    .attr("d", function (d) {
        hex_alignment = (d.grid_y%2==1) ? hexRadius : 0
        return "M" + (d.x *hexRadius*2 + 100)  + "," + ((d.y*1.75 +100)) + hexPath; 
    })

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

有谁知道发生了什么事？

Answer 1

如上所述in the comments，设置原点（v3）/主题（v4）将解决此问题。

但是，如果您不希望（出于任何原因）在拖动功能中设置原点（v3）/主题（v4），只需更改其他内容的属性名称，例如File file = new File(model.getImage().getPath()); if (!file.exists()) return null; RequestBody requestBody = RequestBody.create(MediaType.parse("image/*"), file); MultipartBody.Part filePart = MultipartBody.Part.createFormData(ApiConstant.PICTURE_UPLOAD_PARAM, file.getName(), requestBody); dataService.uploadPassportImage(map, filePart) .subscribeOn(Schedulers.newThread()) .observeOn(AndroidSchedulers.mainThread());和{ {1}}。我们知道a和b是命名坐标的最常见选择，但它会导致拖动函数发生冲突（其解释超出了此处的范围，因为您说您是初学者）。

这很容易显示。以下是使用x和y的简单代码，拖动圆圈：它会跳转。

var svg = d3.select("svg");
var circle = svg.append("circle")
  .datum({
    x: 150,
    y: 75
  })
  .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
  .attr("r", 10)
  .call(d3.drag()
    .on("drag", dragged))

function dragged(d) {
  d3.select(this).attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
}

现在使用svg{ border: 1px solid gray; }和<script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>使用相同的代码。圆圈不会跳跃：

var svg = d3.select("svg");
var circle = svg.append("circle")
  .datum({
    a: 150,
    b: 75
  })
  .attr("transform", d => "translate(" + d.a + "," + d.b + ")")
  .attr("r", 10)
  .call(d3.drag()
    .on("drag", dragged))

function dragged(d) {
  d3.select(this).attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
}

另一种选择是在拖动功能中重新分配svg{ border: 1px solid gray; }和<script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>：

d.x

以下是代码：

d.y

d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," 
    + (d.y = d3.event.y) + ")");

var svg = d3.select("svg");
var circle = svg.append("circle")
  .datum({
    x: 150,
    y: 75
  })
  .attr("transform", d => "translate(" + d.x + "," + d.y + ")")
  .attr("r", 10)
  .call(d3.drag()
    .on("drag", dragged))

function dragged(d) {
  d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")");
}

D3在SVG＆＃34; Path＆＃34;上拖动定义d.x时的元素中断，隐藏数据？

1 个答案: