web-dev-qa-db-ja.com

d3.scaleBandはどのように機能しますか？

この例 からvar x = d3.scale.ordinal().rangeRoundBands([0, width], .05);行を d3.scaleBand を使用してd3 v4で機能させるにはどうすればよいですか？

javascriptd3.jsbar-chart
14
Nafis

d3 4.xでは、ordinal。rangeRoundBandsはbandに置き換えられました.rangeRound（したがって、rangeRoundBandsはもうありません）。それに加えて...

新しいband。padding、band。paddingInnerおよびband。paddingOuterメソッドは、ordinal.rangeBandsのオプションの引数を置き換えます。

したがって、その_0.05_はpaddingInnerになります。これは、D3 v4.xの行の外観です。

_d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05);
_

サンプルのコードを書き直し、D3 v4.xに更新しました： https://plnkr.co/edit/HQz1BL9SECFIsQ5bG8qb?p=preview

必要な変更：

  • var parseDate = d3.timeParse("%Y-%m");
  • var x = d3.scaleBand().rangeRound([0, width]).paddingInner(0.05);
  • var y = d3.scaleLinear().range([height, 0]);
  • var xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m"));
  • var yAxis = d3.axisLeft(y).ticks(10);
  • バーの場合：.attr("width", x.bandwidth())
23
Gerardo Furtado