问题描述
我想将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(堆叠面积图)格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!