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 回答