d3.js - c3.js - 如何手动触发 donut 弧的悬停？

Question

我正在使用 c3.js 并有一个 donut chart ，当您将鼠标悬停在每个类别上时， donut 内有自定义文本。我觉得一切都很好。
我有一些与图表相关的自定义元素，但与图表完全分离......如果用户将鼠标悬停在这些自定义元素上，我需要触发悬停在特定的 donut 弧上，以便“onmouseover”触发， donut 的中间得到也更新了。

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>

所以当有人悬停在 .bar1我要手动触发 data1图表上的列，以便它突出显示该弧并运行“onmouseover”回调，该回调更新 donut 的中间以及我需要做的所有其他事情。生成图表和自定义条的处理将在单独的类方法中。

Answer 1

https://jsfiddle.net/pelluche/2adtw71o/30/
感谢鲁本，我想我想出了如何手动触发 donut 弧。我更新了我的 fiddle 。 chart.focus() 触发高亮，但它不会运行 onmouseover，因此要获取它的值，您可以使用 chart.data.shown()。如果有人知道触发该弧的鼠标悬停的方法，请告诉我。

$('.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();
    }
);