c3js散点图中每个气泡内的文本
Text inside each bubble in c3js Scatter plot
我正在使用 c3 生成散点图 js.I 想在 bubble.Text 中显示一些文本可以是它的值(y 轴)或 x 轴 value.The 属性(标签:true)适用于条形图,但在 scatter.Please help
的情况下不起作用
谢谢
向 c3 散点图添加标签
您可以 select 使用 d3 的点并使用点坐标添加您想要的任何文本。例如,这是添加 serei-index.point-index
的方法
function drawLabels(chartInternal) {
var textLayers = chartInternal.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts);
for (var i = 0; i < textLayers[0].length; i++) {
// select each of the scatter points
chartInternal.mainCircle[i].forEach(function (point, index) {
var d3point = d3.select(point)
d3.select(textLayers[0][i])
.append('text')
// center horizontally and vertically
.style('text-anchor', 'middle').attr('dy', '.3em')
.text(i + '.' + index)
// same as at the point
.attr('x', d3point.attr('cx')).attr('y', d3point.attr('cy'))
})
}
}
然后这样称呼它
drawLabels(chart.internal);
您可以轻松地使用索引从数组中挑选标签。
响应图例点击
要在显示/隐藏每个系列时更新标签位置,方法是单击挂接到图例上的图例,请单击处理程序删除现有标签,并在散点位于最终位置后在新位置再次绘制它们.您使用超时来确保在动画完成后触发标签绘制
这是您的图例选项
legend: {
item: {
onclick: function (id) {
var $$ = this;
// remove existing labels
this.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts).selectAll('*').remove();
// this block is a copy paste from c3 code
if (this.d3.event.altKey) {
this.api.hide();
this.api.show(id);
} else {
this.api.toggle(id);
this.isTargetToShow(id) ? this.api.focus(id) : this.api.revert();
}
setTimeout(function () {
drawLabels($$)
// add a small duration to make sure the points are in place
}, this.config.transition_duration + 100)
}
}
},
Fiddle - http://jsfiddle.net/mn6qn09d/
我正在使用 c3 生成散点图 js.I 想在 bubble.Text 中显示一些文本可以是它的值(y 轴)或 x 轴 value.The 属性(标签:true)适用于条形图,但在 scatter.Please help
的情况下不起作用谢谢
向 c3 散点图添加标签
您可以 select 使用 d3 的点并使用点坐标添加您想要的任何文本。例如,这是添加 serei-index.point-index
的方法function drawLabels(chartInternal) {
var textLayers = chartInternal.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts);
for (var i = 0; i < textLayers[0].length; i++) {
// select each of the scatter points
chartInternal.mainCircle[i].forEach(function (point, index) {
var d3point = d3.select(point)
d3.select(textLayers[0][i])
.append('text')
// center horizontally and vertically
.style('text-anchor', 'middle').attr('dy', '.3em')
.text(i + '.' + index)
// same as at the point
.attr('x', d3point.attr('cx')).attr('y', d3point.attr('cy'))
})
}
}
然后这样称呼它
drawLabels(chart.internal);
您可以轻松地使用索引从数组中挑选标签。
响应图例点击
要在显示/隐藏每个系列时更新标签位置,方法是单击挂接到图例上的图例,请单击处理程序删除现有标签,并在散点位于最终位置后在新位置再次绘制它们.您使用超时来确保在动画完成后触发标签绘制
这是您的图例选项
legend: {
item: {
onclick: function (id) {
var $$ = this;
// remove existing labels
this.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts).selectAll('*').remove();
// this block is a copy paste from c3 code
if (this.d3.event.altKey) {
this.api.hide();
this.api.show(id);
} else {
this.api.toggle(id);
this.isTargetToShow(id) ? this.api.focus(id) : this.api.revert();
}
setTimeout(function () {
drawLabels($$)
// add a small duration to make sure the points are in place
}, this.config.transition_duration + 100)
}
}
},
Fiddle - http://jsfiddle.net/mn6qn09d/