d3軸刻度對齊

我有一個d3條形圖，並且軸刻度標記位於條的下方（如我所期望的那樣）。在這種情況下，我實際上想要左對齊軸線刻度並在條形左邊緣下方有刻度線。那可能嗎？ enter image description here d3軸刻度對齊

編輯：JavaScript來構建軸

// note width is just the width of the chart 
var xScale = d3.scale.ordinal().rangeRoundBands([0,width], .1); 
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

來源

2012-11-30 Jeff Storey

你實際需要的蜱？您可以將滴答的大小設置爲零（'axis.tickSize（0）;'），並使用圖表中每個條下方的滴答文本。 – mccannf

我實際上想顯示刻度 –

您可以提供用於構建x軸的JS嗎？ – meetamit

爲什麼不創建一個新的規模有多大？

var padding = .1; 

var axisScale = d3.scale.linear() 
    .domain([0, n]) 
    .range([0 + padding, WIDTH + padding]);

其中n是直方圖中的條數。

來源

2012-12-03 06:24:35 Wex

我認爲這應該調整，當你添加軸到你的圖形。

嘗試（假設你的圖形稱爲SVG）：

var bandSize = xScale.rangeBand(); 

svg.append("svg:g") 
.attr("transform", "translate(-" + bandSize + "," + h + ")") 
.call(xAxis) 
.selectAll("text") 
    .style("text-anchor", "start") 
    .attr("transform", "translate(" + bandSize + ", 0)");

在我的實驗，這把蜱每個波段的開始，並保留每個頻段下居中的文本。

來源

2014-05-07 21:02:10 dbn

這裏是一個左對齊滴答的例子。

http://bl.ocks.org/mbostock/6186172

的想法是，你創建你收集他們的蜱後aligne他們：

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .attr("y", 6) 
    .attr("x", 6) 
    .style("text-anchor", "start");

來源

2014-12-29 18:18:27 raven

回答

相關問題