D3：堆积条形图未正确解析数据

Question

尝试创建堆积条形图时，我无法理解如何解析和正确绑定 JSON 数据。

尝试绘制图表部分时出现 NaN 错误。

Error: Invalid value for <rect> attribute y="NaN" Error: Invalid value for <rect> attribute height="NaN"

我在从 JS 对象中提取数据或使用 D3 并将其放入适当组织的数组中并不是很有经验，所以这可能就是我的问题所在。

我目前正在使用一些虚拟数据来使其正常工作，但最终我需要一个可以获取未知数量的数据并按日期组织每个“产品”的图表。我也有问题理解我是否应该使用 d3.net() 并使用 d.product_name 或 d.date 作为我的密钥。

完整的小提琴，JS 在 Coffeescript http://jsfiddle.net/toombsday/2hebo511/

window.barGraph = ->  
  dataset = [
    {
      "date": "2014-08",
      "amount": 216, 
      "product_name": 'Annuity 1'
    },
    {
      "date": "2014-08",
      "amount": 116, 
      "product_name": 'Annuity 2'
    },
    {
      "date": "2014-09",
      "amount": 206, 
      "product_name": 'Annuity 1'
    },
    {
      "date": "2014-09",
      "amount": 186, 
      "product_name": 'Annuity 2'
    },
    {
      "date": "2014-10",
      "amount": 216, 
      "product_name": 'Annuity 1'
    },
    {
      "date": "2014-10",
      "amount": 116, 
      "product_name": 'Annuity 2'
    },
    {
      "date": "2014-11",
      "amount": 216, 
      "product_name": 'Annuity 1'
    },
    {
      "date": "2014-11",
      "amount": 206, 
      "product_name": 'Annuity 2'
    },
    {
      "date": "2014-12",
      "amount": 176, 
      "product_name": 'Annuity 1'
    },
    {
      "date": "2014-12",
      "amount": 216, 
      "product_name": 'Annuity 2'
    }
  ]


  margin = {top: 20, right: 30, bottom: 20, left: 30}
  width = 540 - margin.left - margin.right
  height = 320 - margin.top - margin.bottom

  barGraph = d3.select('.reloaded-chart')
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  stack = d3.layout.stack()
    .values((d) -> d.values)
    .x((d) -> d.date)
    .y((d) -> d.amount)

  nest = d3.nest()
    .key((d) -> return d.product_name)

  nested  = nest.entries(dataset)
  layers = stack(nested)

  x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1)
    .domain(dataset.map( (d) -> d.date))

  y = d3.scale.linear()
    .range([height, 0])
    .domain([0, d3.max(dataset, (d) -> +d.y0 + +d.y)])

  xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')

  yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(10)

  barGraph.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis)

  barGraph.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .append('text')

  barGraph.selectAll('.bar')
    .data(layers)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', (d) -> x(d.x))
    .attr('y', (d) -> y(d.y0) - y(d.y))
    .attr('height', (d) -> height - y(d.y))
    .attr('width', x.rangeBand())

$ ->
  barGraph()

感谢您的帮助！

Answer 1

我已经根据您的数据集创建了堆栈条形图。

plnkr

var nest = d3.nest()
.key(function(d) { return d.date; })
.entries(data);

需要修改的地方太多了，大家可以自己去看看。 希望对您有所帮助！