3

次のデータセットがあります。

var data = [
  {
    "air_used": 0.660985, 
    "datestr": "2012-12-01 00:00:00", 
    "energy_used": 0.106402
  }, 
  {
    "air_used": 0.824746, 
    "datestr": "2013-01-01 00:00:00", 
    "energy_used": 0.250462
  } ...
]

そして、次のような棒グラフ (air_used の場合) と折れ線グラフ (energy_used の場合) を描きたいと思います。

ここに画像の説明を入力

私の問題は、現時点では、私が使用している x スケールでは、グラフが次のように見えることです。基本的にバーが間違った位置にあり、最後のバーがチャートから外れています。

ここに画像の説明を入力

これは、完全なコードと作業グラフを含む JSFiddle です: http://jsfiddle.net/aWJtJ/4/

私が望むものを達成するには、最初のデータポイントの前と最後のデータポイントの後に余分な幅があり、バーがすべての幅の半分だけ左にシフトするように x スケールを修正する必要があると思います各バー。

Xスケールで何をする必要があるかを理解してくれる人はいますか?

ドメインに余分な月を追加しようとしました-これにより、最後のバーがグラフの最後から落ちるのを防ぎますが、不要な余分な目盛りも追加され、線の位置が修正されませんグラフと目盛り。

D3 の巧妙な時間ベースのティック フォーマッタと日付パーサーを使用したいので、可能であれば、序数スケールではなく x 軸の時間スケールを使用したいと考えていますxAxis.ticks(d3.time.weeks, 2)。

4

2 に答える 2

0

コメントで指摘されているように、最善のアプローチは を使用することだと思いますd3.scale.ordinal。これを使用してもd3.timeパーサーの使用が妨げられるわけではありませんが、線をバーに揃えるためにバーの幅を考慮する必要があることに注意してください。

ソリューションの例は次のとおりです: http://jsfiddle.net/jcollado/N8tuR/

上記のソリューションの関連コードは次のとおりです。

// Map data set to dates to provide the whole domain information
var x = d3.scale.ordinal()
    .domain(data.map(function(d) {
        return d.date;
    }))
    .rangeRoundBands([0, width], 0.1);

...

// Use x.rangeBand() to align line with bars
var line = d3.svg.line()
    .x(function(d) { return x(d.date) + x.rangeBand() / 2; })
    .y(function(d) { return y(d.energy_used); });

...

// Use x.rangeBand() to set bar width
bars.enter().append("rect")
    .attr("class", "air_used")
    .attr("width", x.rangeBand())
    ...

d.datexスケールを作成するときに使用できるように、日付解析コードが上に移動されていることに注意してください。それを除けば、d3.timeステートメントはまったく変更されていません。

于 2014-02-20T12:49:51.300 に答える