javascript - 使用 D3 拖动路径

Question

我有一个例子，我正在创建一个 View Pane ，其“内部”路径。为了给人留下路径在内部的印象，我将它们剪掉。我也希望能够拖动这些路径。通常的建议是使用 SVG transform 属性。但这带来了两个问题:

• 剪切的路径保持原样，而仅显示部分路径上的拖动
• 将路径“ float ”到给定 Pane 之外。

完成JSFiddle .

数据是:

var outlines = [
[{ "x": 100.0, "y": 100.0}, {"x": 200.0, "y": 100.0}, {"x": 200.0, "y": 200.0}, {"x": 100.0,"y": 200.0}, {"x": 100.0, "y": 100.0}],
[{ "x": -100.0, "y": 200.0}, {"x": 100.0, "y": 200.0}, {"x": 100.0, "y": 300.0}, {"x": -100.0,"y": 300.0}, {"x": -100.0, "y": 200.0}],
];

我创建这样的路径:

layout
.selectAll('.instance')
.data(outlines)
.enter()
.append('path')
.attr('class', 'instance')
.attr('d', function(d) { return line(d); })
.call(drag);

阻力是:

var drag = d3.behavior.drag()
.origin(function(d) {
  return {
    x: 0,
    y: 0
  };
})
.on("dragstart", function(d) {
  d3.event.sourceEvent.stopPropagation();
})
.on("drag", function(d) {
  d3.select(this)
    .classed("dragging", true)
    .attr('transform', function(d) { return 'translate(' + d3.event.x + ',' + d3.event.y + ')'; });
})
.on("dragend", function(d) {
  d3.select(this)
    .classed("dragging", false)
    .attr('transform', null);
});

我想我想将路径实际移动到新位置。但我不确定如何使用 d3.event 偏移量来操作数据。我怎么做？或者有更好的方法来做到这一点吗？

Answer 1

为了正常工作，transform必须严格位于clip-path内(或者换句话说，如果一个元素有一个clip-path和一个变换属性，然后剪辑路径的坐标就会像对象的其余部分一样移动。

在您的情况下解决此问题的简单方法是将矩形包装在剪辑路径组内:

layout
.selectAll('.instance')
.data(outlines)
.enter()
.append("g")    //this group defines the clipping
.attr("clip-path","url(#clip)")
.append('path') //this path can be moved around
.attr('class', 'instance')
.attr('d', function(d) {
  return line(d);
})
.call(drag)

参见https://jsfiddle.net/xhfcdbb7/

我还删除了对剪辑路径的所有其他引用(这样，无论是否拖动，该组都将剪辑到相同的绝对矩形)