5

これが私のd3jsグラフへのリンクですhttp://enjalot.com/inlet/4159384/ 問題は、年を示すy軸がjsonデータに対して2008.5や2009.0などの値を持っていることです。

 [{count:200,year:2008},
    {count:240,year:2010},
    {count:290,year:2009}];

小数点なしで年を表示したいのですが、どうすればいいですか。これが私のd3jsコードです

    var w = 300,
    h = 300,
    padding = 31,
    p = 10;

var data = [{count:200,year:2008},
    {count:240,year:2010},
    {count:290,year:2009}];

var bar_height = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.count; }) )  // min max of count
    .range([p,h-p]);  // min max of area to plot in


var bar_xpos = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.year; }) )  // min max of year
    .range([p,w-p]);  // min max of area to plot in


var xAxis = d3.svg.axis()
            .scale(bar_xpos)
            .orient("bottom")
            .ticks(5);  //Set rough # of ticks

var yAxis = d3.svg.axis()
            .scale(bar_height)
            .orient("left")
            .ticks(5);

var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);
4

1 に答える 1

20

d3値のフォーマットに関するドキュメントを確認してください。

軸のフォーマットに使用する場合d3.format()、軸の値は非常に見栄えが良くなります。

var formatxAxis = d3.format('.0f');

var xAxis = d3.svg.axis()
            .scale(bar_xpos)
            .orient("bottom")
            .tickFormat(formatxAxis)
            .ticks(5);

.0fつまり、小数点以下0
桁 の精度が必要であり、値を固定する必要があります。つまり、丸めずに切り捨てます。

ただし、小数点以下0桁に精度を固定しているため、2009.5と2009.0の両方が2009にフォーマットされていることに気付くでしょう。これは、2つの軸ティックが同じ値を持つ可能性があることを意味します。このエラーは、何年にもわたって十分なデータポイントがあればなくなります。

于 2012-11-28T07:16:42.120 に答える