0

これはd3 jsグラフへのリンクです。

http://enjalot.com/inlet/4131006/

そして、ここにコードがあります

    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);

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", function(d) {
        return bar_xpos(d.year); })
    .attr("y", function(d) { 
        return h - bar_height(d.count); })
    .attr("width", 10)
    .attr("height", function(d) {return bar_height(d.count); })
    .attr("fill", "steelblue")

このグラフに y 軸と x 軸を描画できましたが、正しく見えません。長方形の線が X 軸上にないという問題があります。グラフの x 軸と y 軸に 0 はありません。json データの最小値から始まります。また、軸上の 2 つのマーク間の距離を構成する方法はありません。

4

1 に答える 1

3

軸を構成するには、スケールを変更する必要があります。

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

d3.extent() は、データの最小値と最大値を同時に返し、それをグラフのドメインとして使用します。とを使用bar_heightしbar_xposて をフォーマットするscaleため、スケールの最小値もデータの最小値になります。これを修正するには、d3.max()代わりに次のように使用します。

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


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

bar_xpos min に 0 を使用できますが、データを実際に読み取ることができないため、年単位で行っている場合は意味がありません。ここでは分に 2000 を使用しました。

ここでの作業例。

また、この例では、バーの位置を書式設定して、軸に合わせて少し並べました。に置き換え.attr('width', 10)、attrからも.attr('width', barwidth)減算しました。これにより、バーの右端が端からこぼれるのではなく、軸の右端と一致します。barwidthx

編集:yおよびheight属性を 変更しました。それ以外の場合は、グラフの下で、高さが反対方向に進んでいました。リンクを更新しました。

.attr("y", function(d) { 
    return bar_height(d.count); })
.attr("width", barwidth)
.attr("height", function(d) {return h - bar_height(d.count) - padding; })
于 2012-11-22T15:02:43.190 に答える