縮放/重繪d3.js網格線放大/拖動

我剛剛開始使用d3.js，並且在完成我的工作時遇到了一些麻煩。縮放/重繪d3.js網格線放大/拖動

現在我創建了一個帶兩個y軸的圖表，每個圖表顯示一些值，x軸顯示日期。

點擊y軸上的值，我會顯示相應的水平網格線。

我的問題是，當放大或縮小或拖動時，網格線（水平和垂直）不能正確縮放軸值，它們根本就不會移動。

我今天下午搜索了很多，並找到了一些例子，如何做到這一點，但沒有一個似乎與我已有的代碼一起工作。

我相信，該邏輯應該被加入到縮放行爲，但我不知道

// x axis gridlines 
function make_x_gridlines() { 
    return d3.axisBottom(x) 
     .ticks(5) 
} 


// add the X gridlines 
let xGrid = svg.append("g") 
    .attr('class', 'grid')  
    .attr("id", "grid") 
    .attr("transform", "translate(0," + height + ")") 
    .call(make_x_gridlines() 
     .tickSize(-height) 
     .tickFormat("") 
) 

//zoom behavior 
function zoomed() { 
    .. some behavior .. 

    //redraw gridlines here? 

    .. some behavior .. 
}

請參閱this fiddle整個事情。

即使它不是z軸，我也會調用第二個y軸（右）zAxis。

幫助真的不勝感激。

來源

2017-03-31 Olivier Krull

縮放時軸正在工作。這是因爲在功能zoomed()中，您正在更新比例。

因此，爲了使網格變焦，您只需要更新其比例。將此代碼放入函數zoomed()中，它應該可以工作。

xGrid.call(
    d3.axisBottom(x) 
     .scale(d3.event.transform.rescaleX(x)) 
     .ticks(5) 
     .tickSize(-height) 
     .tickFormat("") 
    )

現在您只需要將此比例更新複製到所有其他網格。對不起，我無法給你一個完整的答案，但我現在沒有太多時間。現在

，在我看來，你應該不具備的功能make_gridlines()，因爲它是非常簡單的，當你在很多不同地方的更新工作也讓我困惑。

因此，不要致電make_gridlines()，請致電d3.axisBottom(x).ticks(5)。

（請注意，我是新來的D3和js，所以我此基礎上自己的一點經驗和知識，推薦）

來源

2017-03-31 17:02:51 TheBiro

就像一個魅力。多謝。 –

是的，你是對的，我將刪除make_gridlines（）函數。 –

縮放/重繪d3.js網格線放大/拖動

回答

相關問題