0

我已经使用 d3.js 的墨卡托函数在 svg-Element 中实现了一个地图。该地图仅代表一个特定城市 - 城市地图之外的所有内容与我的项目无关。

现在我想在这张地图上实现一些功能，比如 zoom() 和 drag()。

但我找不到任何解决方案，用我的墨卡托地图处理拖动（）函数 - 我不能限制转换的区域。（用户应该不能将地图拖到城市地图之外）

对于普通的 svg 元素，这有效：

var drag = d3.behavior.drag()
                 .on("drag", dragmove);

function dragmove(d) {
    var x = Math.max(0, Math.min('width-of-svg-element', d3.event.x));
    var y = Math.max(0, Math.min('height-of-svg-element', d3.event.y));
    d3.select(this)
    .attr("transform", "translate(" + x + "," + y + ")");
    }

但它不适用于我的墨卡托地图。

请帮我 ：（

提前致谢！

这是一个小例子： https ://jsfiddle.net/c55w7u9e/

我的意图是，用户应该不可能将红色圆圈（在本例中，但在我的项目中为地图）拖动到 svg 元素之外......

4

1 回答 1

2

更新小提琴：https ://jsfiddle.net/thatoneguy/c55w7u9e/4/

你没有考虑到你的半径。它正在工作，但你看不到它。将拖动更新为：

function dragmove(d) {
    var x = Math.max(0, Math.min(width - radius, d3.event.x));
    var y = Math.max(0, Math.min(height - radius, d3.event.y));
    d3.select(this)
    .attr("transform", "translate(" + x + "," + y + ")");
    }

来自这个问题的帮助：解释 Mike Bostock 的 d3.js dragmove 函数

这个例子：http ://bl.ocks.org/mbostock/1557377 //认为它离线......

我会使用这个功能来限制，它工作得更好：

function dragmove(d) {
  d3.select(this)
      .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
        }

从示例更新小提琴：https ://jsfiddle.net/thatoneguy/c55w7u9e/5/

于 2016-04-15T09:57:50.253 回答