c3.js-如何手动触发圆环弧的悬停

Question

我使用的是c3.js，当你将鼠标悬停在每个类别上时，我有一个甜甜圈图，里面有自定义文本。我做得很好。

我有一些与图表相关的自定义元素，但与图表完全分离。。。如果用户悬停在那些自定义元素上，我需要触发悬停在特定的圆环弧上；onmouseover"；触发器和甜甜圈的中间也会更新。

var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type: 'donut',
onmouseover: (d) => { 
// does stuff to middle of donut not included here
console.log("onmouseover", d);          
}
},
donut: {
title: "custom data here"
},

});
// i want to highlight and run onmouseover for specific chart arc
$('.custom-bars .bar').hover(
function() {  
var id = $(this).data('id');
console.log('trigger ' + id +  ' arc hover state');

}, function() {
// remove hover
}
);

.custom-bars .bar {
background: #ccc;
margin-bottom: 10px;
padding: 10px;
display: inline-block;
cursor: pointer;
}

<div class="custom-bars">
<div class="bar bar1" data-id="data1">data1 related stuff</div>
<div class="bar bar2" data-id="data2">data2 related stuff</div>
</div>
<div id="chart" style="width:100%; height: 350px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

所以当有人悬停在CCD_ 1上时，我想手动触发图表上的CCD_；onmouseover"；回调，它更新了甜甜圈的中间以及我需要做的所有其他事情。生成图表和自定义条形图的处理将在单独的类方法中进行。

Answer 1

https://jsfiddle.net/pelluche/2adtw71o/30/

多亏了鲁本，我想我学会了如何手动触发甜甜圈弧。我更新了我的小提琴。chart.focus((触发高亮，但它不运行onmouseover，所以要获取它的值，可以使用chart.data.shown((。如果有人知道触发该弧的onmousever的方法，请告诉我。

$('.custom-bars .bar').hover(
function() {  
var id = $(this).data('id');
var arcData = chart.data.shown(id);
chart.focus(id);
console.log(arcData);    
}, function() {
chart.revert();
}
);