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 = [{"key"： "消費者裁量"、 "values"：[[0000000000000、27.38478809681]、[0000000000000、27.37137218208]、[00000000000000000、26.82341151935] "" "Key" "kike" "kike ": [ [ 0000000000000 , 27.45458809681] , [ 0000000000000 , 27.444444444408] , [ 0000000000000 , 26.455555555395] } ,

したがって、変換が正しければ、次のようになります。キー" : "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 変数の 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 に答える