Question

我使用D3.js实现了缩放树形图。树形图可以缩放和平移我限制了缩放功能但不能限制地图的平移。我希望平移只能在地图内而不是在地图之外。

这是我的树形图的当前工作实现：http://www.advbizclan.com/treemapt/

我希望它像缩放功能一样，仅限于地图，平移也应仅限于地图。

Answer 1

小提琴的问题是LoadType不正确。要解决此问题，只需点击Javascript窗口顶部的Javascript按钮，然后在No wrap- in <body>中选择LOAD TYPE。

至于你的问题。这很简单。目前，您可以使用它来平移和缩放树形图：

.call(d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", function() {
      console.log(d3.event.translate)
      chart.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")

这使用d3.event.translate翻译您的svg。但你只想在y方向平移？当d3.event.translate返回一个x和y坐标数组时，translate需要x和y坐标进行平移，只需将x和d3.event.translate[1]（即y坐标）传递给像所以：

.on("zoom", function() {
        chart.attr("transform", function(d) {
          console.log(d3.event.translate);
          return "translate(" + [0, d3.event.translate[1]] + ")" + " scale(" + d3.event.scale + ")"
        })
      }))

现在的程度。您需要为此添加限制，对于我刚刚完成此操作的示例（您可以轻松实现自己的限制）：

 if(d3.event.translate[1] > 0 && d3.event.translate[1] < chartHeight/2 ){
          console.log('move')
          return "translate(" + [0, d3.event.translate[1]] + ")" + " scale(" + d3.event.scale + ")";
          }

在这里，您无法向上拖动地图，但可以将其向下拖动一半。

更新了小提琴：https://jsfiddle.net/thatoneguy/w7em39wj/

限制D3树形图平移

1 个答案: