1

http://nvd3.org/ghpages/scatter.html

我想建立一个与上面的例子非常相似的图表。我仍处于起步阶段，尝试输入我自己的数据时遇到了一点困难，无论是作为 CSV 还是在代码中内联。

我很确定下面的代码负责生成虚假数据以填充图表，但是，我似乎找不到输入真实数据的正确方法。我已经阅读了 d3 站点上文档的“数据”参考部分，并尝试实现代码，但无法让它工作。我认为问题在于结构。问题是，我如何找出我需要如何构造数据数组并将其用作数据的输入？

这是我正在构建图表版本的现场示例。 http://goo.gl/XHela

这是生成随机数据的代码：

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;
}

在您回复之前，我尝试使用以下代码将函数 randomData 的结果输出到页面（刚刚修改过的相同）。

    function see(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]
      });
    }
  }

data.toString();
var x=document.getElementById("demo");
x.innerHTML=data;
}

但是在页面上的输出是 [object Object],[object Object],[object Object],[object Object]

我想接下来的问题是如何将我自己的数据用于此图表而不是生成的数据？

4

1 回答 1

1

data您可以通过在 Chrome 中使用 Chrome 开发人员工具的控制台逐步执行代码来查看其结构。在您上面链接的页面（第一个链接）Ctrl + Shift + C中，在 Windows 或Command + Shift + cOSX 中按下将打开此窗口。单击 Sources 并scatter.js从左侧的文件列表中找到该文件。在以下行设置断点：return data。刷新页面。代码执行将在该行暂停。现在转到控制台并输入data. data用于图表的 将被输出。您可以浏览该结构并了解它是如何创建的。

最后你应该看到这样的东西：

控制台的屏幕截图。

于 2013-03-20T17:49:24.890 回答