使用 DC.js（crossfilter 和 d3 便利库）时遇到问题 - 条形图未显示值答案

【问题标题】：Trouble using DC.js (crossfilter and d3 convenience library) - bar chart not showing values使用 DC.js（crossfilter 和 d3 便利库）时遇到问题 - 条形图未显示值
【发布时间】：2013-04-01 06:22:20
【问题描述】：

我正在使用这个库：Dimensional Charting 来构建一些需要 CrossFilter 功能的相对标准的图表。

我一直在关注这些示例，但它们对我不起作用。

这是我的代码：

var dashData = crossfilter(data.report),
dataByHour = dashData.dimension(function(d){ return d3.time.hour(new Date(d.timestamp))}),
totalByHour = dataByHour.group().reduceSum(function(d) { return d.amount }),

dc.barChart("#graphTimeOverview")
    .width(990) // (optional) define chart width, :default = 200
    .height(250) // (optional) define chart height, :default = 200
    .transitionDuration(500) // (optional) define chart transition duration, :default = 500
    .margins({top: 10, right: 50, bottom: 30, left: 40})
    .dimension(dataByHour) // set dimension
    .group(totalByHour) // set group
    .elasticY(true)
    .centerBar(true)
    .gap(1)
    .x(d3.time.scale().domain([new Date(data.report[0].timestamp), new Date(data.report[(data.report.length - 1)].timestamp)]))
    .round(d3.time.hour.round)
    .xUnits(d3.time.hours)
    .renderHorizontalGridLines(true);

dc.renderAll();

我知道交叉过滤器数据工作正常，这里是该组的一个示例：

totalByHour:

[ {key:(new Date(1361746800000)), value:6170.17},
  {key:(new Date(1361678400000)), value:3003},
  {key:(new Date(1361581200000)), value:2350.42}, 
  {key:(new Date(1361667600000)), value:1636.19},
    etc... 
]

不幸的是，这让我得到一个空图，它似乎正确地计算了 y 轴，所以在我看来它可以读取数据，但是我从来没有看到任何条形值：

【问题讨论】：

另外补充一下，以防万一有人问：DOM 中没有代表条形的 SVG 元素，所以这不是样式/视觉问题。
你能构建一个 jsFiddle 吗？
关于您的问题的数据不足，无法知道出了什么问题。像这样，我建议您使用 Chrome javascript 控制台查看是否有错误消息。
我同意，我也已尽我所能，这是我所知道的尽可能多的信息。在这一点上，我已经放弃了 DC.js，我将在 D3 和 CrossFilter 中本地实现我的图表。
我的意思更多的是要求您使用您现在拥有的东西设置一个 jsFiddle，以便我们帮助您解决问题。

标签： javascript d3.js crossfilter dc.js

【解决方案1】：

可能data.report 数组未按时间戳排序（提供的示例未排序）。在您的代码中，您假设这些值已排序。您可以尝试使用

// Compute the timestamp extent
var timeExtent = d3.extent(data.report, function(d) { return d.timestamp; });

dc.barChart("#graphTimeOverview")
    // more settings here
    .x(d3.time.scale().domain(timeExtent.map(function(d) { return new Date(d); })))
    .round(d3.time.hour.round)
    .xUnits(d3.time.hours)
    .renderHorizontalGridLines(true);

如果你提供一个 jsFiddle 会更容易说出问题所在。

【讨论】：

我的组没有按x域排序！

【解决方案2】：

我几天前开始使用 dc.js，所以我不确定。但是，我认为你的代码应该进入

d3.csv("data.csv", function(data) { //your-code }; 要么 d3.json("data.json", function(data) {//your-code}; 要么 jQuery.getJson("data.json", function(data){//your-code});

【讨论】：

这些都是异步检索某些数据格式并转换为对象数组的方法。我已经在一个对象数组 (dashData) 中有我的数据，该数组被加载到 Crossfilter 中，从那时起处理数据，原则上无论如何。