javascript - 在 dc.js 中放大文本标签

标签 javascript css d3.js dc.js

我有一堆使用 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>

JS

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

最佳答案

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

看看里面的样式

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

了解可定制的内容。

关于javascript - 在 dc.js 中放大文本标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25454889/

相关文章:

javascript - 设置 dc.js/d3 图表中 y 轴值的格式

javascript - 在 JavaScript 中以所有可能的方式将 2 个数组合并为 1 个数组

javascript - 移动 View 中的标题 chop

jquery - Parsley.js 根据输入更改框阴影和边框颜色

android - 如何让移动网页在所有设备上显示相同

d3.js - 在直流系列图中设置 Y 轴范围

javascript - 循环遍历两个对象数组以将匹配值推送到新数组在 React 中不起作用,但在 JS Fiddle 中起作用

javascript - 为什么我设置cookie时出现多个重复的条目?

css - 固定标题最初覆盖主要内容

javascript - 如何设置 d3 符号的大小?