在 dc.js 中放大文本标签答案

【问题标题】：Enlarge text labels in dc.js在 dc.js 中放大文本标签
【发布时间】：2014-08-22 20:10:21
【问题描述】：

我有一堆使用 dc.js 绘制的条形图，我想增加标签的字体大小。我认为使用 renderLet 函数有一个简单的解决方案，但是，我必须为每个图形执行 renderLet 函数，而且我有一堆。我想知道是否有办法使用 CSS 增加标签文本大小。我为jsfiddle 提供了三种类型的图表。这是它的代码。如果您有任何想法，请告诉我。谢谢。

HTML

<body> 
    <div id='pie'><div><h3>Pie</h3></div></div>
    <div id='row'><div><h3>Row</h3></div></div>
    <div id='bar'><div><h3>Bar</h3></div></div>
</body>

    var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group();

dc.pieChart("#pie")
    .width(200).height(200)
    .dimension(XDimension)
    .group(YDimension)
    .label(function (d) {
    return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';
});

dc.rowChart("#row")
    .width(400).height(150)
    .dimension(XDimension)
    .group(YDimension)
    .label(function (d) {return d.key + " " + d.value;})

dc.barChart("#bar")
    .width(400).height(150)
    .dimension(XDimension)
    .group(YDimension)
    .x(d3.scale.ordinal().domain(["A","B","C"]))
    .xUnits(dc.units.ordinal)

dc.renderAll();

【问题讨论】：

是的，看看 dc.css 并随意定制！ github.com/dc-js/dc.js/blob/master/dc.css
@Gordon 你想添加它作为答案吗？我会接受的。
好的，谢谢！很高兴它有帮助。

标签： javascript css d3.js dc.js

【解决方案1】：

是的！您可以通过覆盖层叠样式表中的样式来自定义文本大小和字体。

看看里面的样式

https://github.com/dc-js/dc.js/blob/master/dc.css

了解可以自定义的内容。

【讨论】：