本文介绍了d3.js csv到nvd3(堆叠面积图)格式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想将csv转换为nvd3堆叠面积图所需的格式:
,但在数组转换中丢失了。有人可以帮忙吗?



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

代码(修改自):

  < 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.htmlbut got lost in the arrays conversion. Can someone help?

csv:length,m1,m2,m3,m49,1,2,3,499,11,22,33,44999,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 datesc. 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(堆叠面积图)格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-22 02:48