如何突出顯示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>