0

縦棒グラフ・縦棒グラフ
これは、d3.js を使用して作成したグラフです。各セット (3 つのバー) の中央のバーが月の名前と一致するように、バーをティック値の中心に配置したいと考えています。これをエレガントに行う方法はありますか？データセットまたはチャート関数についてさらに情報が必要な場合はお知らせください。

役立つコード

this.container.selectAll('g.container')
    .data(this.data)
  .enter().append('g')
    .attr('class', 'container')
    .attr('transform', function(d, i){
        console.log(d.dimension, this)
        var x = self.margin.left + self.xScale(d.dimension.value);
        var y = self.margin.top;
        return 'translate('+ x + ',' + y +')'
});

this.bars = this.container.selectAll('g.container')
    .selectAll('rect.bar')
    .data(function(d){ return d; })
  .enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('width', 3)
    .attr('height', function(d){
        console.log(d.y, d.key, this);
        return availableHeight - self.yScale(d.y);
    })
    .attr('y', function(d){ return self.yScale(d.y); })
    .attr('x', function(d, i){ return i * 5 });
4

1 に答える 1

0

これは、追加された長方形transformのg.containerまたは属性を調整することで実現できます。x変換を調整します。つまり、変更します

.attr('transform', function(d, i){
  console.log(d.dimension, this)
  return 'translate('+ 
          (self.margin.left + self.xScale(d.dimension.value)) + ',' 
          + self.margin.top +')'
});

余分なスペースを含める (s の差の半分dimension.value)。

于 2012-07-21T10:48:55.063 に答える