d3.js csv转nvd3（堆积面积图）格式答案

【问题标题】：d3.js csv to nvd3 (stacked area chart) formatd3.js csv转nvd3（堆积面积图）格式
【发布时间】：2013-09-11 22:33:37
【问题描述】：

我正在尝试将我的 csv 转换为 nvd3 的堆积面积图所需的格式：http://nvd3.org/ghpages/stackedArea.html 但在数组转换中迷路了。有人可以帮忙吗？

csv：长度,m1,m2,m3,m4 9,1,2,3,4 99,11,22,33,44 999,111,222,333,444

nvd3需要的格式

var histcatexplong = [ { "key" : "Consumer Discretionary" , “值”：[[0000000000000，27.38478809681]，[0000000000000，27.371377218208]，[0000000000000，26.823411519395]}， { "key" : "消费必需品" , “值”：[[0000000000000，27.45458809681]，[0000000000000，27.444444444408]，[0000000000000，26.455555555395]}，

所以如果转换正确，我应该得到： var myall = [ { “键”：“m3”， “值”：[ [ 9 , 3] , [ 99, 33] , [ 999, 333] } , { “键”：“m1”， “值”： [ [ 9 , 1] , [ 99, 11] , [ 999, 111] } ,

我的转换代码：

d3.csv("s1.csv", function (csv) {

var myall = [ 
 {
 "key" : "m3",
 "values" : []
 },
 {
 "key" : "m2",
 "values" : []
 }
];


v3 = csv.map(function(d) { return [ +d["length"], +d["m3"] ]; });
v2 = csv.map(function(d) { return [ +d["length"], +d["m2"] ]; });

d3.keys(csv).forEach(function(d) { 
 myall[0].values.push(v3);
 myall[1].values.push(v2);
});

 console.log(myall);

问题是 myall 没有出现在 DOM 中（控制台输出似乎缺少顶级层次结构：

[Object { key="m345", values=[249]}, Object { key="m2", values=[249]}]

对于 nvd3 堆积面积图示例，为 histcatexplong var 进行 DOM 复制/粘贴：

*histcatexplong
[Object { key="Consumer Discretionary", values=[77]}, Object { key="Consumer Staples", values=[77]}, Object { key="Energy", values=[77]}, 7 more...]*

谢谢。

【问题讨论】：

您是否确认您的转换代码可以正常工作？
它没有用。我发现了错误： v2 = csv.map(function(d) { return +d["total_length"], +d["m2"] ; });将返回所有值的所有行whereeas我需要互换的，即不是这个（错误）：值：[0.484966052376334，0.36980639547531，0.176522506619594，246更多...]，[0.484966052376334，0.36980639547531，0.176522506619594，246更多... ], 我需要这样（nvm 不同的值，看看结构）： values [[1138683600000, 0], [1141102800000, 0], [1143781200000, 0], 74 more...]

标签： d3.js stacked-area-chart

【解决方案1】：

经过一些调试，我解决了这个问题。作为对其他学习者的帮助，我发布了代码。这对需要的人很有用：一种。 nvd3 堆积面积图（免费为您提供工具提示和其他实用程序，即无需额外编程）湾。带有值而不是日期的 x 轴 C。具有这种格式的 csv 数据（平面层次结构）：

length,m1,m2
103.10,111,2222
137.91,0.36980639547531,99.6301936045247
113.30,0.176522506619594,99.8234774933804
159.59,0.244376214048499,99.7556237859515

代码（修改自http://nvd3.org/ghpages/stackedArea.html）：

<script>
<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">

<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

#chart1, #chart2 {
  height: 500px;
}

</style>
<body>

  <div>
    <svg id="chart1"></svg>
  </div>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script src="../src/models/stackedAreaChart.js"></script>
<script>
var myall = [ 
  {
    "key"    : "m1",
    "values" : []
  },
  {
    "key"    : "m2",
    "values" : []
  }
];


d3.csv("s1.csv", function (error, csv) {
  if (error) return console.log("there was an error loading the csv: " + error);
  console.log("there are " + csv.length + " elements in my csv set");

 csv.sort(function(a,b) {return a.length-b.length;});

var mmm = ["m1","m2"];

for (var i = 0; i < mmm.length; i++) {
 myall[i].values = csv.map(function(d) { return [ +d["length"], +d[mmm[i]] ]; });
};


var colors = d3.scale.category20();
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)
                .clipEdge(true);
//  chart.xAxis
  //    .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
  chart.yAxis
      .tickFormat(d3.format(',.2f'));
  d3.select('#chart1')
    .datum(myall)
      .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;
});



// end read csv
});

【讨论】：