Question

我有一个案例，我正在创建一个视图窗格，路径＆＃34;内部＆＃34;它。为了给人留下印象，我正在剪裁它们。我也希望能够拖动这些路径。通常的建议是使用SVG transform属性。但这提出了两个问题：

剪切路径保持这种状态，而只显示部分路径上的拖动
拖动路径＆＃34;浮动＆＃34;在给定窗格之外。

数据是：

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

要正常工作，body { height:100%; }必须严格位于transform内（或者以另一种方式放置，如果元素具有剪辑路径和变换属性，则该坐标为剪辑路径就像对象的其余部分一样被移动。

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

clip-path

请参阅https://jsfiddle.net/xhfcdbb7/

我还删除了对clip-path的所有其他引用（这样，无论是否拖动，该组都会保留剪辑到相同的绝对矩形）

使用D3拖动路径

1 个答案: