覆盖轴和图例 dc.js 的样式

Question

我想覆盖 dc.js 中图表的样式

我想更改轴、图例等的字体、颜色、字体粗细。

在不修改库的情况下进行此更改的最佳方法是什么？

Answer 1

不受数据驱动的样式/元素

任何不是由数据驱动的东西最好使用 CSS 进行修改。我通常只是使用浏览器的检查器/开发者工具来确定要使用的正确选择器，但您也可以通过查看sass source for dc.css 获得一些线索。

您在上面列出的所有视觉属性都属于此类别。一般来说，绘图区域之外的任何东西都不是数据驱动的。

图表中事物的许多视觉属性也不是数据驱动的。例如，如果您想更改绘图区域内的文本标签，这些样式都来自 dc.css，最好使用 CSS 进行修改。

由数据驱动的样式/元素

要更改任何 数据驱动的内容，使用 pretransition 钩子将是最好的方法 - 在添加或删除所有元素后渲染或重绘后触发（但在它们从旧值转换到新值之前）。

这个表格是

chart.on('pretransition', function(chart) {
    chart.select('something').attr(...);
});

其中something 是一个选择器，例如rect.bar - 图表内选择器are starting to be documented in the Wiki。