1

我正在尝试将我的 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 = [{“键”：“消费者酌情”，“值”：[[0000000000000，27.38478809681]，[000000000000000，27.371377218208]，[0000000000000，27.371377218208]，[00000000000000000000000，26.82341151939393939,,; " : [ [ 0000000000000 , 27.45458809681] , [ 0000000000000 , 27.444444444408] , [ 0000000000000 , 26.455555555395] } ,

所以如果转换正确，我应该得到： var myall = [ { "key" : "m3" , "values" : [ [ 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...]*

谢谢。

4

1 回答 1

1

经过一些调试，我解决了这个问题。作为对其他学习者的帮助，我发布了代码。这对有以下需求的人很有用：nvd3 堆积面积图（免费为您提供工具提示和其他实用程序，即无需额外编程） b。带有值而不是日期的 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
});

于 2013-09-12T18:23:16.260 回答