可以同时使用 C3 和 D3 吗？

Posted 2023-02-22

【中文标题】可以同时使用 C3 和 D3 吗？

【英文标题】：Is it possible to use C3 and D3 together?

【发布时间】：2015-06-16 16:51:03

【问题描述】：

我正在研究图表库，D3 的强大功能给我留下了深刻的印象，但它的文档让我有点难以置信。如果我知道我仍然可以使用 D3 来填补 C3 的任何限制，那么使用 C3 会更容易做出决定。

那么是否有可能通过 C3 使用 D3 功能来增强使用 C3 生成的图表？

【问题讨论】：

是的。 C3 建立在 D3 之上。

@LarsKotthoff 仅仅因为 A 建立在 B 之上并不意味着它们可以互操作——这完全取决于 D3 C3 暴露了多少。我很感激一些例子来展示如何使用 D3 增强 C3 图表。

D3 和 C3 都在 DOM 上运行。使用 C3 修改 DOM 不会阻止您使用 D3 进一步修改它，类似于构建在 D3 之上的其他库，例如 NVD3。您可能希望如何“增强”C3 图表完全取决于您的用例。

我很欣赏对 NVD3 的基本见解和参考。一个例子可以为我澄清很多事情。

D3创作者的回答：github.com/masayuki0812/c3/issues/1112#issuecomment-91938465

【参考方案1】：

您的问题有点模糊，无法回答——您究竟想如何使用d3 修改c3 生成的图表？

也就是说，无论如何我都会尝试回答。 d3 是关于选择/附加 DOM 元素，将数据绑定到它们，然后操作它们。在c3 完成之后，没有什么可以阻止您选择它生成的内容并进一步修改它。

这是我能想到的simplest example：

// basic c3 line chart
var chart = c3.generate(
  data: 
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ]
  
);

// select all it's "circles" and make them red
d3.selectAll(".c3-circle")
  .style("fill","red");

不过，如果我是你，我会硬着头皮学习d3。如果您正在查看构建在 d3 之上的绘图库并说您需要更多，那么您的代码将从直接构建的 d3 开始变得更干净、更易于维护。

【讨论】：

感谢您的回答，这很有帮助！您知道您的建议是否也适用于 Dimple 或 NVD3？

@BT，是的，我的建议成立。我确实更喜欢 NVD3 而不是 c3 和 dimple。