0

我无法在图表上获取数据。我只得到一个数据集栏。

你可以在这里看到它：http: //infinite-fjord-1599.herokuapp.com/page2.html

但是当我 console.log 为它记录 foreach 时。它显示所有对象：

  data.days.forEach(function(d) {
    d.ages = ageNames.map(function(name) { return {name: name, value: +d.values[name]}; });
    console.log(d.ages);
  });

在此处输入图像描述

jsFiddle 上的代码。http://jsfiddle.net/arnir/DPM7y/

我对 d3.js 和使用 json 数据非常陌生，所以我有点迷路了。我以 d3.js 示例站点为例进行了修改。

4

2 回答 2

1

有几件小事让你大吃一惊。首先，x0 比例的域应该是一个日期时间对象数组，而不是字符串数组：

x0.domain(data.days.map(function(d) {
  var str = d.modified;
  d.date = parseDate( str.substring(0, str.length - 3) );
  return d.date;
}));

将返回日期时间，而不是像以前那样的字符串（轻微的挑剔：真的不喜欢这种用法map，我会在加载数据时在 forEach 函数中单独添加 date 属性）。

其次，x0 需要传递一个实际存在的属性：

var state = svg.selectAll(".state")
    .data(data.days)
  .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x0(d.date) + ",0)"; });

以前，您使用x0(d.state)的是分组栏示例的遗迹（其他几个仍然存在；我已经更改了最低限度以使您的项目正常工作）。由于该值不存在，所有矩形都被相互绘制。

此外，我们需要格式化轴标签，这样我们就不会在标签上打印出整个日期时间对象：

var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom")
  .tickFormat(d3.time.format("%m-%d"));

最后，我注意到最新的日期被打印在左边而不是右边。你可以对结果进行排序data.days.map( ... )来解决这个问题，我只是颠倒了 x0 的范围：

var x0 = d3.scale.ordinal()
  .rangeRoundBands([width, 0], .1);

固定文件

于 2013-07-15T22:04:24.803 回答
1

在此处查看更新的小提琴：http: //jsfiddle.net/nrabinowitz/NbuFJ/4/

您在这里遇到了几个问题：

  • 您的x0比例设置为显示格式化日期的域，但是当您稍后调用它时，您正在传递d.State（它不存在，所以我认为这是一个复制/粘贴错误）。所以后来的日子是在第一天的基础上渲染的。

  • 您选择组g元素的方式与添加它的方式之间存在不匹配——这实际上不是根本原因，但可能会在以后引起问题。

要修复，请将日期格式移动到不同的函数：

function formatDate(d) {
    var str = d.modified;
    d.date = parseDate( str.substring(0, str.length - 3) );
    var curr_month = d.date.getMonth() + 1;
    var curr_date = d.date.getDate();
    var nicedate = curr_date + "/" + curr_month;
    return nicedate;
}

然后对比例设置使用相同的功能：

x0.domain(data.days.map(formatDate));

和转换（请注意此处选择器和类中的修复）：

      var state = svg.selectAll("g.day")
          .data(data.days)
        .enter().append("g")
          .attr("class", "day")
          .attr("transform", function(d) {
              return "translate(" + x0(formatDate(d)) + ",0)";
          });
于 2013-07-15T22:05:57.697 回答