D3在堆积的面积图中乘以数据点

时间:2013-04-03 03:20:57

标签: javascript json d3.js nvd3.js

由于某些原因,我的stackedAreaChart将我的每个y值乘以10.这是我到目前为止所拥有的:

  var data = [{"key":"New York","values":[["2000","47"],["2001","49"],["2002","49"],["2003","47"],["2004","48"],["2005","49"],["2006","50"],["2007","48"],["2008","48"],["2009","47"],["2010","50"],["2011","49"],["2012","51"]]},{"key":"Los Angeles","values":[["2000","56"],["2001","55"],["2002","55"],["2003","56"],["2004","57"],["2005","56"],["2006","57"],["2007","56"],["2008","57"],["2009","57"],["2010","57"],["2011","55"],["2012","56"]]}] ;

  var colors = d3.scale.category10();
  keyColor = function(d, i) {return colors(d.key)};

  var chart;
  nv.addGraph(function() {
    chart = nv.models.stackedAreaChart()
    .x(function(d) { return d[0] })
    .y(function(d) { return d[1] })
    .color(keyColor)

    chart.xAxis
    .showMaxMin(false)

    chart.yAxis
    .tickFormat(d3.format(',.2f'));

    d3.select('#chart1')
    .datum(data)
    .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

    return chart;
  });

1 个答案:

答案 0 :(得分:2)

data数组中的值都是字符串。在nvd3世界的某个地方,它们会被添加为字符串,而不是数字,然后就会遇到您遇到的问题(例如"47" + "49"等于"4749")。

解决此问题的快捷方法是将您的访问者更改为.y(function(d) { return +d[1] })。添加的+将字符串强制转换为数字。

但更好的解决办法是在你的JSON中开始使用数字而不是字符串。