Question

我正在使用Dimensional Charting javascript库dc.js创建一个行图，它基于d3和crossfilter。我正在为我们的人口显示行图。如何展示我们十大县人口和少数十个县的人口.Thanx

Answer 1

Stack Overflow旨在帮助人们完成他们的尝试。

它不鼓励勺子喂食。

这是一个list少数网站，可以帮助您完成d3的基本功能。

转到dc.js。这是一个很棒的多维图表javascript库。

dc.js - 这是官方网站。

Annotated Source - 适用于dc.js网站中的图表。

Code Project - 这是另一个我逐步学习dc.js的网站。

Fiddle - 使用dc.js创建饼图。

步骤：

您需要加载以下库和css文件 -

d3.js
crossfilter.js
dc.js
dc.css

此代码使用的是crossfilter js。

var ndx = crossfilter(data);

我正在解析数据。

var parseDate = d3.time.format("%m/%d/%Y").parse;

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
        d.Year=d.date.getFullYear();
});

我们在这里创建一年的维度，我们得到total列的总和。

var yearDim  = ndx.dimension(function(d) {return +d.Year;});
var year_total = yearDim.group().reduceSum(function(d) {return d.total;});

通过这段代码，我们在div中创建一个饼图。

var yearRingChart   = dc.pieChart("#chart-ring-year");

yearRingChart
    .width(150).height(150)
    .dimension(yearDim)
    .group(year_total)
    .innerRadius(30);

最后，在我们创建的所有图表的末尾，这是将所有图表呈现给浏览器的代码。

dc.renderAll();

要制作行图，只需将饼图更改为行图，就像这样。

var yearRingChart   = dc.rowChart("#chart-ring-year");

并删除我们没有行图表的innerRadius属性。

yearRingChart
    .width(150).height(150)
    .dimension(yearDim)
    .group(year_total)

通过更改它，您将获得一个行图。

这是一个完整的fiddle，其中包含rowChart。

希望这有帮助。

如何在dc.js中显示行图

1 个答案: