12

c3棒グラフのデータの上のラベルの位置を変更する方法はありますか? 公式ドキュメントには、y および x 整数を操作して x および y 測定軸上のラベルの位置を変更する方法が十分に説明されていますが、データ ラベルについては何も見つかりませんでした。

ベースになっているプレーンd3でそれを指そうとしましたが、 nullを返します：c3console.log

d3.selectAll(".c3-texts .c3-text").each(function () {
    var yOrigin = d3.select(this).attr('y');
    console.log(yOrigin);
})

グラフ生成前に発火するためです。ここで私が取り組んでいるものを表示および編集できます。

var chart = c3.generate({
  data: {
    columns: [
      ['de', 30],
      ['da', 20],
      ['db', 50],
    ],
    groups: [
      ['de', 'da', 'db']
    ],
    type: 'bar',
    labels: {
      format: {
        y: function(v, id) {
          return id;
        },
      }
    }
  },
  grid: {
    y: {
      lines: [{
        value: 0
      }]
    }
  }
});

d3.selectAll(".c3-texts .c3-text").each(function() {
  var yOrigin = d3.select(this).attr('y');
  console.log('yOrigin:' + yOrigin);
  //d3.select(this).attr('y',100);
})
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.css" rel="stylesheet" />
<div id="chart">
</div>

4

1 に答える 1

10

これらのラベルに影響を与えるには、次の 2 つの方法があります。

を。transformCSS での使用:

.c3-texts .c3-text text {
  transform: translate(-22px, 0);
}

b. onrenderedコールバックで D3 を使用してそれらを選択します。

var chart = c3.generate({
    onrendered: () => {
        d3.selectAll('.c3-text').each((v) => {
            console.dir(v);
        });
    },
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],
        groups: [
            ['data1', 'data2']
        ],
        type: 'bar',
        labels: true
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    }
});

これは、setTimeout を使用するよりも優れています。D3 でラベルを選択できるようになる前に、ラベルのレンダリングにかかる​​時間を恣意的に推測する必要がないからです。

var chart = c3.generate({
  onrendered: () => {
    d3.selectAll('.c3-text').each((v) => {
      console.dir(v);
    });
  },
  data: {
    columns: [
      ['data1', 30, -200, -100, 400, 150, 250],
      ['data2', -50, 150, -150, 150, -50, -150],
      ['data3', -100, 100, -40, 100, -150, -50]
    ],
    groups: [
      ['data1', 'data2']
    ],
    type: 'bar',
    labels: true
  },
  grid: {
    y: {
      lines: [{
        value: 0
      }]
    }
  }
});
.c3-texts .c3-text text {
  transform: translate(-22px, 0);
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.css" rel="stylesheet" />

<div id="chart">
</div>

于 2016-05-01T13:38:43.773 に答える