D3 - 格當軸在頁面

中間我有以下D3圖（使用12842311輸入）：http://www.uscfstats.com/deltas D3 - 格當軸在頁面

加載圖表後，單擊網格按鈕（僅加載後）。網格會出現。顯而易見的問題是垂直線只位於圖表的上半部分。

這是因爲據我所知，D3只允許您爲刻度標記的開頭指定偏移量，這就是我如何操作它，然後不讓您指定結束偏移量。我也認爲你必須用刻度線來做，否則你不知道蜱的位置，除非你做了一些複雜的事情。

我該如何解決這個限制，並在x軸上做垂直線的網格？看起來應該不難。我是否正在以正確的方式創建網格？

var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(15); 

svg.append("g").attr("class","x axis").call(xAxis).attr("transform","translate(60, " + height + ")");

來源

2012-10-16 Andrew Latham

我沒有在您的示例頁面上看到網格，它是否不再工作？你能創建一個顯示問題的jsfiddle嗎？ – Bill

你必須點擊「網格」按鈕。 –

我做到了。控制檯顯示「xAxis未定義」。 – Bill

我能得到這個工作的最簡單方法是手動調整大小並翻譯tick標記。

svg.selectAll(".y line") 
     .attr("x2", width); 

    svg.selectAll(".x line") 
     .attr("y2", height) 
     .attr("transform", "translate(0," + (-y(0)) + ")");

你可以在http://jsfiddle.net/2y3er/2/看到一個工作示例。

來源

2012-10-17 02:45:51 Bill

您可以製作兩組刻度SVG元素，一個在正方向延伸，另一個在負方向延伸。

修改您的D3設置包括另一個軸或兩個，但這次在您call方法修改tick參數：

Dim xAxis = d3.svg.axis().scale(...).ticks(... // define your xAxis generator 

Dim xAxisSVG = d3.selectAll(...)... // and your standared axis 
     .call(xAxis); 

Dim xPositiveTicks = d3.selectAll(...)... // positive grid lines 
     .call(xAxis.tickSize(height)); 

Dim xNegativeTicks = d3.selecatAll(...)... // negative grid lines 
     .call(xAxis.tickSize(-1 * height));

我知道這是不是非常透徹，但這種方法已經工作很適合我以往。

來源

2012-10-16 21:36:55 mbeasley

不幸的是，這對我不起作用。我用這個代碼，和xNegativeTicks的一個類似的片斷。另請參閱編輯問題的結尾。 var xPositiveTicks = d3.selectAll（「。x.axis」）。call（xAxis.tickSize（height））; –

D3 - 格當軸在頁面

回答

相關問題