使用d3在手機上縮放觸摸

我使用庫D3構建了一個圖表，現在我需要在x軸上進行觸摸縮放，而不是雙擊，因爲我注意到在互聯網上查看。我問你這麼做？如果有可能的話，你可以學習如何去做。非常感謝。 dave使用d3在手機上縮放觸摸

不幸的是，我根本無法放大！

我複製了所有上：https://jsfiddle.net/1y408pzo/1/

在那裏，當我點擊放大（移動將與觸摸來管理）我的一切消失......

function redraw() { 


zoom.x(x); 

    d3.select(this) 
     .transition() 
     .ease("linear"); 
    svg.select(".xAxis").call(xAxis); 
    svg.select(".yAxis").call(yAxis); 
    svg.select(".grid").call(make_y_axis().tickSize(-width, 0, 0).tickFormat("")); 
    svg.select(".data1").attr("d", lineFunction(data)); 
}

來重新繪製圖形，但它確實不要畫任何東西！

我不知道該怎麼辦......

來源

2016-03-10 Dave

你打算付錢給別人嗎？如果是這樣，這不是那個網站。告訴我們你試過的東西，我們會指引你朝着正確的方向發展。我們不是在這裏做你的工作，而是像我說的那樣，更多地指向你正確的方向，並告訴你你錯了什麼地方 – thatOneGuy

我沒有要求做我的工作，但我要求一個例子來學習，如果我受傷解釋，我表示歉意！我還沒有做過關於縮放的任何工作，因爲我找不到任何適合我的案例的類型......我重複道歉，如果有人錯了！ – Dave

不需要道歉，你現在知道：P至於縮放看這些：https://bl.ocks.org/mbostock/6123708 https://github.com/mbostock/d3/wiki/Zoom-Behavior the第一個是縮放和平移，第二個是縮放行爲的工作原理。對於你的，你說你想放大點擊X軸？在xaxis上附加一個事件監聽器（'click'）並切換縮放（i。e切換縮放比例，例如1和2之間的縮放，以便放大和縮小。你確實需要給我們更多關於你想要的信息。在網上很容易找到沒有雙擊的 – thatOneGuy

你可以找到所有你想要上線的信息。

例如縮放：

縮放和平移在一起：https://bl.ocks.org/mbostock/6123708

變焦的工作原理：https://github.com/mbostock/d3/wiki/Zoom-Behavior

的防止雙擊像你說：How to disable double click zoom for d3.behavior.zoom?

的工作原理是這樣：d3.select("svg").on("dblclick.zoom", null);

你說你想放大點擊在x軸上？需要更多關於你真正想要什麼的信息。你想切換縮放嗎？如果是的話是這樣的：

xaxis.on('click', toggleZoom); 

var zoomIn = false; 

function toggleZoom() { 
    var thisScale; 
    if (zoomIn) { 
    thisScale = 1; 
    zoomIN = false; 
    } else { 
    thisScale = 2; 
    zoomIn = true; 
    } 
    //container is your container of the chart, not your axis 
    container.attr("transform", "scale(" + thisScale + ")"); 
}

基本上這部作品通過檢查，如果你已經放大，如果你還沒有放大的規模的2，如果你放大，放大我們回到最初。

來源

2016-03-10 16:54:23 thatOneGuy

好吧，我做到了！這是艱苦的工作，其結果是在這裏：https://jsfiddle.net/1y408pzo/9/

變焦給出：

var zoom = d3.behavior.zoom() 
.scaleExtent ([1, 12]) 
.x (x) 
.on ('zoom', zoomHandler function() { 

svg.select ('. x.axis') 
.call (xAxis); 

svg.selectAll ('. data1, circle'). attr ('transform', 'translate (' + d3.event.translate [0] + ', 0)' 
+ 'Scales (' + d3.event.scale + ', 1)'); 

});

雖然「DEFS」對象需要不讓出圖形，除了軸。

來源

2016-03-15 12:01:37 Dave

使用d3在手機上縮放觸摸

回答

相關問題