d3.js csv到nvd3（堆叠面积图）格式 [英] d3.js csv to nvd3 (stacked area chart) format

问题描述

我想将csv转换为nvd3堆叠面积图所需的格式： http：// nvd3.org/ghpages/stackedArea.html
，但在数组转换中丢失了。有人可以帮忙吗？

csv：
length，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，
values：[[0000000000000，27.38478809681]，[0000000000000，27.371377218208]，[0000000000000，26.823411519395 ]}，
{
key：Consumer Staples，
values：[[0000000000000,27.45458809681]，[0000000000000,27.444444444408]，[0000000000000,26.455555555395]}， / p>

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

p>

  d3.csv（s1.csv，function（csv）{
 
 var myall = [
 {
key：m3，
values：[] 
}，
 {
key：m2 b $ bvalues：[] 
} 
]; 
 
 
 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堆叠面积图示例，DOM复制/粘贴histcatexplong var：

  * histcatexplong 
 [Object {key =Consumer Discretionary，values = [77]} ，Object {key =Consumer Staples，values = [77]}，Object {key =Energy，values = [77]}，另外7个...] * 
  
 
 $ b 
感谢。
解决方案
解决这个问题为了帮助学习者，我发布代码
这对于需要的人是有用的：
 a。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 =stylesheettype =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; 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（加载csv时出错：+ error）; 
 console.log（csv set中有+ csv.length +元素）; 
 
 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 ）}; 
 
 var chart; 
 
 nv.addGraph（function（）{
 chart = nv.models.stackedAreaChart（）
 .x函数（d）{return d [0]}）
 .y（function（d）{return d [1]}）
 .color（keyColor）
 .clipEdge 
 // 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 
}）; 
  
 
 
I'm trying to convert my csv to the format needed by nvd3's stacked area chart: http://nvd3.org/ghpages/stackedArea.html
but got lost in the arrays conversion. Can someone help?

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


format needed by nvd3 

var histcatexplong = [ 
 { 
 "key" : "Consumer Discretionary" , 
 "values" : [ [ 0000000000000 , 27.38478809681] , [ 0000000000000 , 27.371377218208] , [ 0000000000000 , 26.823411519395] } , 
 { 
 "key" : "Consumer Staples" , 
 "values" : [ [ 0000000000000 , 27.45458809681] , [ 0000000000000 , 27.444444444408] , [ 0000000000000 , 26.455555555395] } , 

so if the conversion is right, I should get:
var myall = [ 
 { 
 "key" : "m3" , 
 "values" : [ [ 9 , 3] , [ 99, 33] , [ 999, 333] } , 
 { 
 "key" : "m1" , 
 "values" : [ [ 9 , 1] , [ 99, 11] , [ 999, 111] } , 


My code for the conversion:
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);
The problem is that myall didn't show up in the DOM (console output seems to be missing a top hierarchy:
[Object { key="m345", values=[249]}, Object { key="m2", values=[249]}] 
For the nvd3 stacked area chart example, DOM copy/paste for the histcatexplong var:
*histcatexplong
[Object { key="Consumer Discretionary", values=[77]}, Object { key="Consumer Staples", values=[77]}, Object { key="Energy", values=[77]}, 7 more...]*
Thanks.
解决方案
After some debugging, I fixed the issue. As a help to fellow learners, I post the code. 
This is useful for people that need:
a. nvd3 stacked area chart(gives you the tooltips and other utilities for free i.e. no extra programming)
b. x-axis with values instead of dates
c. has csv data (flat hierarchy) in this format:
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
code (modified from 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（堆叠面积图）格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！