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

需要修改太多地方，您可以自行查看。希望它有所帮助！

D3：Stacked Bar Chart无法正确解析数据

1 个答案: