22

私は d3.js でバー プロットを作成しています。各バーは 1 か月間の合計結核症例を表します。データは基本的に、日付 (最初は %Y-%m 形式の文字列ですが、d3.time.format.parse を使用して解析されます) と整数で構成されます。軸ラベルを比較的柔軟にしたいのですが (年の境界だけを表示したり、月ごとにラベルを付けたりするなど)、バーも等間隔にしたいと思います。

日付スケールを使用すると、柔軟な軸ラベルを取得できます。

var xScaleDate = d3.time.scale()
    .domain(d3.extent(thisstat, function(d) { return d.date; }))
    .range([0, width - margin.left - margin.right]);

...しかし、各月の日数が異なるため、バーの間隔は均等ではありません (たとえば、2 月と 3 月は他の月よりも著しく接近しています)。線形スケールを使用して等間隔のバーを取得できます。

var xScaleLinear = d3.scale.linear()
      .domain([0, thisstat.length])
      .range([0, width - margin.left - margin.right]);

...しかし、日付ベースの軸ラベルを作成する方法がわかりません。両方のスケールを同時に使用して、 から軸を生成するxScaleDateだけで何が起こるかを確認してみましたが、スケールは自然に正しく整列しません。

私が見逃しているこれを達成する簡単な方法はありますか?

4

3 に答える 3

10

序数スケールと時間スケールを組み合わせることができます。

// Use this to draw x axis
var xScaleDate = d3.time.scale()
    .domain(d3.extent(thisstat, function(d) { return d.date; }))
    .range([0, width - margin.left - margin.right]);

// Add an ordinal scale
var ordinalXScale = d3.scale.ordinal()
    .domain(d3.map(thisstat, function(d) { return d.date; }))
    .rangeBands([0, width], 0.4, 0);

// Now you can use both of them to space columns evenly:
columnGroup.enter()
    .append("rect")
    .attr("class", "column")
    .attr("width", ordinalXScale.rangeBand())
    .attr("height", function (d) {
        return height - yScale(d.value);
    })
    .attr("x", function (d) {
        return xScaleDate(d.date);
    })
    .attr("y", function (d){
        return yScale(d.value);
    });

このアプローチを示すために、少し前に例を作成しました: http://codepen.io/coquin/pen/BNpQoO

于 2015-07-02T07:29:55.613 に答える
1

私は同じ問題を抱えていました.いくつかの月が他の月よりも長いことを受け入れ、バー間のギャップが一定に保たれるように列バーの幅を調整することになりました. したがって、クロスフィルターのホームページのデモ (http://square.github.com/crossfilter/ - d3 を使用) で barPath 関数を調整すると、次のような結果が得られました。

var colWidth = Math.floor(x.range()[1] / groups.length) - 1;//9;
if (i < n - 1) {
     //If there will be column on the right, end this column one pixel to the left
      var nextX = x(groups[i+1].key)
      colWidth = nextX - x(d.key) - 1;
}
path.push("M", x(d.key), ",", height, "V", yVal, "h",colWidth,"V", height);
于 2012-12-18T11:04:31.697 に答える
-2

試してくださいd3.scale.ordinal：

    var y = d3.scale.ordinal()
     .domain(yourDomain)
     .rangeRoundBands([0, chartHeight], 0.2);

Tweek 0.2パラメータ。

于 2012-08-30T20:17:32.353 に答える