javascript - 在 c3.js 上自定义图表点

Question

我想要一个带有空(内部没有填充)点的面积图。

我一直在尝试定制自己的CSS，但似乎不可能做出我想要的东西。

我发现的只有一种方法 - 将功能添加到我的图表中:

onrendered={() => {
      d3.selectAll("circle")
      .style("fill", "white")
      .style("stroke", "black");
   }} 

但是当页面加载时，我仍然会看到一段时间的填充点。

有没有一种方法可以使用 CSS 或不使用 onrendered 函数来实现无填充点？

Answer 1

如果所有点共享相同的颜色就可以了，那么这在普通 css 中就非常简单了，我们想要将描边设置为黑色(或其他)，将描边宽度设置为 1 px，并将填充设置为白色(没有一个会显示下面的线/区域):

circle {
  stroke: black;
  stroke-width: 1px;
  fill: white !important;
}

这是修改 examples 之一的快速演示来自 c3.js 文档。我已经包含了上面的 css，并展示了如果您想以不同的方式平衡半径和描边宽度，如何修改点半径:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        types:{
          data1: 'line',
          data2: 'area'
        }
    },
    point: {
      r: 3 // default is 2.5
    }
});

circle {
  stroke: black;
  stroke-width: 1px;
  fill: white !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.2/c3.js"></script>

<link rel="stylesheet" type="text/css" href="https://rawgit.com/masayuki0812/c3/master/c3.css">

<div id="chart"></div>