在 c3.js 上自定义图表点答案

【问题标题】：Customize chart points on c3.js在 c3.js 上自定义图表点
【发布时间】：2018-04-10 17:11:00
【问题描述】：

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

我一直在尝试自定义自己的 CSS，但似乎无法做出我想要的。

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

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

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

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

【问题讨论】：

这在一定程度上取决于他们内部使用的内容。如果他们使用了.attr("fill", "black")，那么 css 应该覆盖它，但如果他们使用了 .style("fill", "black")，css 将不起作用。

标签： javascript d3.js c3.js

【解决方案1】：

如果所有点都可以共享相同的颜色，那么这在纯 css 中非常简单，我们希望将描边设置为黑色（或其他），描边宽度为 1 px，并将填充设置为白色（不会显示下方的线/区域）：

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>

【讨论】：