如何在C3.js条形图中集中单击的条形？
[英]how to focus the clicked bar in C3.js bar graph?
问题描述
I have this code which makes a graph using c3.js : https://jsfiddle.net/1bxe2scd/ 
我有这段代码使用c3.js来绘制图形： https ://jsfiddle.net/1bxe2scd/
<!DOCTYPE html>
<html>
<head>
<title>Dsnap - Charts</title>
<!-- Load c3.css -->
<link href="c3/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="d3/d3.min.js" charset="utf-8"></script>
<script src="c3/c3.min.js"></script>
</head>
<body>
<div id="chart" style="width:480px;height:400px"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
x: 'Date',
columns:
[
['Date', '2011-02','2013-01','2013-02','2013-03','2013-04','2013-05','2013-06','2013-07','2013-08','2013-09','2013-10','2013-11','2013-12','2014-01','2014-02'],
['value', 777,53,165,269,344,376,410,421,405,376,359,392,433,455,978]
],
type: 'bar',
onclick: function(e) { console.log(e.x);}
},
axis: {
rotated: true,
x: {
type: 'category'
}
},
tooltip: {
grouped: false
},
legend: {
show: false
}
});
</script>
</body>
</html>
I want the bar on which the user clicks to be focused and the rest of the bar should become faded, how can I achieve that? 我希望用户单击的条形聚焦，其余的条形消失，如何实现？
How can I get the Y value of the clicked bar(eg: 2011-02 etc)? 如何获得所点击栏的Y值（例如：2011-02等）？
2 个解决方案
解决方案1
2 已采纳 2016-01-26 09:15:47
You can do this for highlighting the bar: 您可以这样做来突出显示栏：
onclick: function(e) {
//make all the bar opacity 0.1
d3.selectAll(".c3-shape").style("opacity",0.1);
var k = ".c3-shape-"+ e.index;
//make the clicked bar opacity 1
d3.selectAll(k).style("opacity",1)
}
On clicking out side in the chart if you wish to bring back all the bars attach the click listener to the chart and on click make all bar's opacity 1: 在图表的外侧单击时，如果希望恢复所有条形，则将点击侦听器附加到图表上，并在单击时使所有条形的不透明性1：
d3.selectAll("#chart").on("click", function(d) {
//reset all the bars
d3.selectAll(".c3-shape").style("opacity", 1);
})
EDIT 编辑
So now since you have two charts specify the id also to make it specific to the chart note the id in the selector: (#chart/#chart1): 因此，由于您有两个图表，因此还要指定ID以使其特定于图表，请注意选择器中的ID：（＃chart /＃chart1）：
d3.selectAll("#chart1").on("click", function(d) {
//reset all the bars for chart1
d3.selectAll("#chart1 .c3-shape").style("opacity", 1);
})
d3.selectAll("#chart").on("click", function(d) {
//reset all the bars for chart
d3.selectAll("#chart .c3-shape").style("opacity", 1);
})
On click for chart1 bar will look like this: 单击chart1时，条形如下所示：
onclick: function(e) {
//make all the bar opacity 0.1 for chart1
d3.selectAll("#chart1 .c3-shape").style("opacity", 0.1);
var k = "#chart1 .c3-shape-" + e.index;
//make the clicked bar opacity 1
d3.selectAll(k).style("opacity", 1)
event.stopPropagation()
}
Hope this helps! 希望这可以帮助！
解决方案2
0 2017-08-21 20:36:53
C3 has callbacks, for specifying what should happen when a click (or mouseover/mouseout) event occurs: C3具有回调，用于指定发生单击（或鼠标悬停/鼠标悬停）事件时应发生的情况：
http://c3js.org/reference.html#data-onclick http://c3js.org/reference.html#data-onclick
It also has "APIs": functions you can call to basically act like the user made a selection or focused: 它还具有“ API”：您可以调用以基本上像用户进行选择或集中处理一样的功能：
http://c3js.org/reference.html#api-focus http://c3js.org/reference.html#api-focus
You could hook one of these up to trigger the other, like have the onclick() function call focus() . 您可以将其中之一触发另一个，就像onclick()函数调用focus() 。
But given what you're precisely looking for, the impediment would be that the focus() function doesn't accept the indices of individual bars on the graph. 但是给定您要查找的内容，因此障碍在于focus()函数不接受图形上各个条形的索引。 So it can only highlight an entire column/series of data at once, not individual bars. 因此，它只能一次突出显示整个列/系列数据，而不是单个条。 Here's the GitHub issue: 这是GitHub问题：
https://github.com/c3js/c3/issues/1389 https://github.com/c3js/c3/issues/1389
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.