自定义c3.js上的图表点

Question

我想要一个空的（没有填充的内部）点的区域图表。

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

我找到的只有一种方法 - 在我的图表中添加功能：

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

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

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

Answer 1

如果所有点共享相同的颜色都很好，那么在普通css中这是非常简单的，我们想要将笔划设置为黑色（或其他），将笔划宽度设置为1 px，并将填充设置为白色（没有人会显示下面的行/区域）：

Param (
    [parameter(ParameterSetName = "Switch1")]
    [Switch]
    $Switch1,
    [parameter(ParameterSetName = "Switch2")]
    [Switch]
    $Switch2, 
    [parameter(ParameterSetName = "Switch1")]
    [parameter(ParameterSetName = "Switch2")]
    [string]
    $Parameter        
)

这是一个快速演示，修改了c3.js文档中的examples之一。我已经在上面列出了css，并展示了如果你想以不同的方式平衡半径和行程宽度，如何修改点半径：

＆＃13;

＆＃13;

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

＆＃13;

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
    }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;