文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在mercator地图上限制d3.js的拖动行为

问如何在mercator地图上限制d3.js的拖动行为
EN

Stack Overflow用户

提问于 2016-04-15 09:13:40

回答 1查看 2.2K关注 0票数 0

我用d3.js的mercator-函数在svg元素中实现了一个映射。地图只代表一个特定的城市--城市之外的一切--地图与我的项目无关。

现在，我想在此地图上实现一些函数，如缩放()和拖动()。

但是我找不到任何解决方案，用我的墨卡托地图来处理拖动()-function--我不能限制面积的转换。(用户不应该能够将地图拖出城市地图之外)

对于正常的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元素.

svg

limit

drag

mercator

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-15 09:57:50

更新小提琴：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 + ")");
    }

来自这个问题的帮助：Explaining Mike Bostock's d3.js dragmove function

这个例子：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/

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36642974

复制

相似问题

问如何在mercator地图上限制d3.js的拖动行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在mercator地图上限制d3.js的拖动行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在mercator地图上限制d3.js的拖动行为
EN