Question

我正在尝试将我的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]，[0000000000000,27.371377218208]，[0000000000000,26.823411519395]}， { “关键”：“消费者订书钉”， “值”：[[0000000000000,27.45458809681]，[0000000000000,27.444444444408]，[0000000000000,26.455555555395]}，

所以如果转换是正确的，我应该得到： var myall = [ { “关键”：“m3”， “价值”：[[9,3]，[99,33]，[999,333]}， { “key”：“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...]*

感谢。

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

d3.js csv到nvd3（堆积面积图）格式

1 个答案: