2017-05-31 11 views
2

私は、序数x軸を持つDC JSを使用して折れ線グラフを作成しました。それは、私が取り除くように見えない、x軸上にいくつかの外側パディングがあることを除いて、機能します。最も左端のデータポイントと右端のデータポイントが、パディングなしでチャートのエッジと同じ高さになるようにしたいと思います。うまくいけば、私は明らかな何かを逃していません。DC JS:序数スケールのx軸を持つ折れ線グラフの外側パディングを削除しますか?

x軸の縮尺を間違って設定していると思います。このようなデータセットを考える:

var data = [ 
    { key: 'Monday', value: 3000000 }, 
    { key: 'Tuesday', value: 3100000 }, 
    { key: 'Wednesday', value: 3500000 }, 
    { key: 'Thursday', value: 3070000 }, 
    { key: 'Friday', value: 4500000 }, 
    { key: 'Saturday', value: 3003030 }, 
    { key: 'Sunday', value: 5010000 } 
]; 

ここで私は、x軸の目盛りでやっているものです:

var ordinalScale = d3.scale.ordinal().domain(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']).rangeRoundBands([0,chartWidth]); 
chart.x(ordinalScale).xUnits(dc.units.ordinal); 

私も順序尺度にD3のドキュメントを見て、しかしhasnことをしましたまだ助けてくれませんでした。

ここではスクリーンショット(赤でマーク余分なパディング)です: http://imgur.com/a/zmfF4

ここでは、問題を示し作業JSフィドルです: https://jsfiddle.net/qvp4fpzy/4/

答えて

0

それはdc.jsおよびd3の両方で少し混乱取引です.jsはレンジバンドの周りに機能します。

dc.js内蔵の独自のバー/線x位置の計算がありますが、Xスケールが序数であれば、それは自動的に.rangeBandsを選択します:

if (_chart.isOrdinal()) { 
     _x.rangeBands([0, _chart.xAxisLength()], _rangeBandPadding, 
         _chart._useOuterPadding() ? _outerRangeBandPadding : 0); 
    } else // ... 

source link

だから私は「ドン.rangeRoundBandsへのあなたの電話は何らかの効果があると思います。 (dc.jsはたぶん?代わりにrangeBandsrangeRoundBandsを使用する必要がありますが、この質問に重み付けしません。)

それはあなたが影響したいthird parameter to rangeBandsだし、それはchart._outerRangeBandPadding()によって制御されます。 (chart._useOuterPadding()を無視する - 。それは、下位互換性のことだ)

ですから、ここで必要なのは働い

chart._outerRangeBandPadding(0); 

no outer padding

Working fork of your fiddle.

+0

です!本当にありがとう。 – nblocks

関連する問題