在 c3.js 上自定义图表点

Question

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

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

我发现的唯一方法 - 向我的图表添加函数：

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

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

有没有使用 CSS 或不使用 onrendered 函数实现无填充点的方法？

Answer 1

如果所有点共享相同的颜色没问题，那么这在普通 css 中非常简单，我们想将描边设置为黑色（或其他），描边宽度为 1 px，并将填充设置为白色（none 将在下面显示 line/area）：

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

这是修改 c3.js 文档中的 examples 之一的快速演示。我在上面包含了 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>

在 c3.js 上自定义图表点

Customize chart points on c3.js

javascript

d3.js

c3.js