有什么方法可以改变 c3
条形图中数据上方标签的位置吗?
在官方文档中很好地解释了如何通过操作 y 和 x 整数来更改标签在 x 和 y 测量轴上的位置,但我没有找到任何数据标签。
我试图用 c3
所基于的普通 d3
指向它,但是 console.log
返回 null:
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>
最佳答案
有两种方法可以影响这些标签:
一个。在 CSS 中使用 transform
:
.c3-texts .c3-text text {
transform: translate(-22px, 0);
}
在 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>
关于javascript - 数据标签的c3js位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26149258/