Question

嗨，点击一个按钮，我只想让图形在缩小的0,0位置，基本上是一个重置按钮。可能吗？我可以在哪个元素上做到这一点？

会不会是： -

d3.select('svg').select('g').transition()
.duration(1000).attr('transform', "translate(0,0)scale(1)")

但是上面移动了整个图形，包括x和y轴，只是将其缩小。我只希望绘制区域内的元素像x，y轴上的线，点，值一样变化。

请帮忙。 JSFiddle

Answer 1

基本上你只需要将所有设置回到位置（0,0）和缩放1。

您应该实现一种集中所有输入控件的方法。

http://jsbin.com/niqara/2/edit?js,output

function reset(source) {
  d3.select('g').transition()
    .duration(750)
    .attr("transform", "translate(0,0)scale(1)");
  zoomListener.scale(1);
  zoomListener.translate([0, 0]);
}

Answer 2

我能够实现＆＃34;重置＆＃34; （使用下面的行将图形元素移动到0,0并缩小到初始值）： -

function resetGraph(){
    zoom.scale(1); //Zoom out to this scale
    zoom.translate([0, 0]); //move/drag chart to 0,0 xy position
    zoomed(); //Handler that updates all elements after zoom performed
    slided(); //Optional- to update slider which works to zoom in and zoom out
}

基本上所有这些都可以放在一个函数中，可以在任何地方调用，也可以单击按钮来重置图形。

如何将D3图形移动到初始缩放和0,0位置 - RESET Graph？

2 个答案: