D3.js图只显示一个数据集

Question

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

您可以在此处查看：http://infinite-fjord-1599.herokuapp.com/page2.html

但是当我在console.log中为它预告。它显示所有对象：

  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示例站点为例进行了修改。

Answer 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;
}));

将返回日期时间，而不是之前的字符串（次要的nitpick：真的不是这种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);

fixed files

Answer 2

请在此处查看更新的小提琴：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)";
          });