如何突出显示c3.js线图中只有一个数据点？

Question

使用point show作为false隐藏所有data points。
但如果我想隐藏除一个数据点以外的所有内容，该怎么办。

例如

var chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
      ['data1', 30, 200, 100, 400, 150, 250], 
 
      ['data2', 50, 20, 10, 40, 15, 25] 
 
     ] 
 
    } 
 
});

在上述折线图，如何突出数据点值是100和隐藏每隔一个数据点？

Answer 1

在C3中，这些圆圈有一个名为c3-circle的类。因此，使用D3的选择，你可以设置基于绑定数据的不透明度：

var circles = d3.selectAll(".c3-circle") 
    .style("opacity", function(d){ 
     return d.value === 100 ? 1 : 0; 
    }) 

因此，只有与100圆可见。

以下是演示：

var chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
      ['data1', 30, 200, 100, 400, 150, 250], 
 
      ['data2', 50, 20, 10, 40, 15, 25] 
 
     ] 
 
    } 
 
}); 
 

 
var circles = d3.selectAll(".c3-circle").style("opacity", function(d){ 
 
\t return d.value === 100 ? 1 : 0; 
 
})

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://rawgit.com/masayuki0812/c3/master/c3.css"> 
 
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> 
 
<div id="chart"></div>