1

ここhttp://nvd3.org/ghpages/scatter.htmlで例を作成しようとしています が、自分のデータを使用してカスタマイズされた修正バージョンです。実際のデータを使用するコードを作成するのに問題があります。可能なコードがどのようになるかを示すサンプルコードを誰かに教えてもらえますか？インラインデータまたはCSVのいずれかを参照することで問題ありません。

randomData関数からバックアウトする方法を理解しようとすると、非常に困難になります。

私のサンプルページはここhttp://goo.gl/XHelaにあり、私が持っているコードは...です。

<div id="offsetDiv">
  <div id="test1" class="chartWrap">
    <svg></svg>
  </div>
</div>

<script>
//Format A
var chart;

nv.addGraph(function() {
  chart = nv.models.scatterChart()
                .showDistX(true)
                .showDistY(true)
                //.height(500)
                .useVoronoi(true)
                .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(d3.format('.02f'))
  chart.yAxis.tickFormat(d3.format('.02f'))

  d3.select('#test1 svg')
      .datum(randomData(4,40))
    .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;
});


function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random(), 
        y: random()
        , //size: Math.random()
   //     shape: shapes[j % 6]
      });
    }
  }

  return data;
}
</script>
4

1 に答える 1

1

このrandomData関数は、次のような構造を返します。

var data = [{key: 'Group1', values: [{x: 1, y: 1}, {x: 2, y: 3}, {x: 4, y: 9}]},
            {key: 'Group2', values: [{x: 32, y: 0}, {x: 3, y: 54}, {x: 1, y: 8}]}];

つまり、基本的には、キーと値のリストがあり、それぞれがxとyメンバーを持つオブジェクトで構成されています。上記のコードをへの呼び出しのドロップイン置換として使用できるはずrandomDataです。また、この形式に変換することで、所有しているすべてのデータを使用できます。

于 2013-03-21T16:37:54.897 に答える