2013-03-26 43 views
6

私はこのページにD3のcrossfilterライブラリを使用しています:あなたは2番目のグラフを見ればd3棒グラフでカスタムx軸ラベルを設定しますか?

http://jovansfreelance.com/bikestats/d3/crossfilter.php

が、あなたはx軸ラベルを持って表示されます0.0、0.5、1.0、... 、6.0。私はこれらのラベルを週の曜日にする必要があるので、0.0は月曜日、0.5は全く存在してはいけませんし、なぜデータに整数だけがあるので現れたのかわかりません。

誰でもこの方法を教えてもらえますか? 4つのグラフすべてが同じ関数を呼び出すことに注意してください。この特定のグラフに対してのみラベルを修正する必要があります(ハードコーディングは問題ありません)。

答えて

19

序数をチェックしてください。一方で、あなたは非常に簡単にあなた自身のtickFormatを行うことができます。

var weekdays = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"]; 
var formatDay = function(d) { 
    return weekdays[d % 7] + "day";  
} 

をそれからちょうど例えば、規模に渡し:D3 v4ので

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(formatDay); 
0

を私は次のようにそれを働いた:

var data = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"] 
var xScaleLabels = d3 
    .scalePoint() 
    .domain(data) 
    .rangeRound([50, width - 50]); // In pixels 

var axisTop2 = d3 
    .axisBottom() 
    .scale(xScaleLabels) 
    .ticks(data.length); 

svg 
    .append("g") 
    .call(axisTop2) 
    .attr("transform", "translate(" + margin.left + "," + height + ")"); 
関連する問題