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

嗨点击一个按钮，我只是想图形在0,0位置缩小，基本上它是一个重置按钮。这可能吗？我可以在哪些元素上做到这一点？如何将D3图形移动到初始缩放位置并在0,0位置 - RESET图形？

会不会是： -

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

但移动整个图形，包括X和Y轴之上，只是缩小了出来。我只想要绘制区域内的元素像线条，点，x和y轴上的值一样变化。

请帮忙。 JSFiddle

来源

2016-09-30 Rahi

基本上你只需要设置全部恢复1.

你应该实现一个方法来集中所有的输入控件的位置（0,0）和规模。

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]); 
}

来源

2016-09-30 14:00:58 rafaelcastrocouto

我看到这个JS小提琴，但它并没有正常工作。我需要知道我需要重新设置所有的控件，以及如何进行？例如xaxis，yaxis ..等 – Rahi

好消息！我能用这两行来实现我想要的功能： zoomListener.scale（1）; zoomListener.translate（[0，0]）; 唯一的一点是它没有在图immidiately更新，但我要拖了一点，所以图追溯到0,0 – Rahi

伟大的...当你找到解决方案发布一个答案，所以其他人可以从中学习。 – rafaelcastrocouto

我能够使用刚刚低于线实现 “复位”（移动图形元素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 
}

基本上所有这一切可以进入一个功能，并可以在任何地方或点击一个按钮重置图形。

来源

2016-10-05 04:08:48 Rahi

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

回答

相关问题