C3.js 将图例标记更改为圆形？

Question

我正在比较 C3 和 NVD3。

非常喜欢NVD3的图例功能。 C3传说无聊

如何使用 C3 将图例更改为圆形？

谢谢。

Answer 1

您可以通过 select 输入正确的元素并更改其 css 代码 (it's in the docs) 来实现此目的。使用 d3 select 函数 select 您需要的所有层次结构：

d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')

你可以在这里看到其他一些很好的例子： https://codepen.io/lucusc/pen/GZXBxX

但基本上，选择 legend 元素并根据需要进行自定义。

Answer 2

纯CSS解决方案怎么样？

.c3-legend-item-tile {
  shape-rendering: auto;
  stroke-linecap: round;
  stroke-dasharray: 0.1 10;
  stroke-width: 8;
  transform: translate(6px, 1px);
}

查看实际效果：https://jsfiddle.net/Dimmy/40cubjve/

C3.js 将图例标记更改为圆形？

C3.js Change Legend Marker to Circle?

nvd3.js

c3.js