Question

我有一个非常简单的D3示例，首先将数据读入关联数组，然后将其显示在条形图中。

我似乎无法使用此方法显示任何内容。相反，我必须在两者之间插入一个任务：将数据读入关联数组，将数据复制到一个简单数组中，然后使用简单数组显示条形图。

chart.selectAll("div")
     .data(genreAssociative)
     .enter().append("div")
     .style("width", function(d) { return d * 10 + "px"; })
     .text(function(d) { return d; });

以上不起作用。

genreSimple = [];
for (var genre in genreAssociative) genreSimple.push(genreAssociative[genre]);         
chart.selectAll("div")
     .data(genreSimple)
     .enter().append("div")
     .style("width", function(d) { return d * 10 + "px"; })
     .text(function(d) { return d; });

上述情况;使用简单的数组作为中介。是否有一种特殊的方法来迭代关联数组而不是标准数组？

Answer 1

您可以使用函数d3.values或d3.entries直接使用关联数组。您只需在设置属性的函数中考虑它（例如function(d) { return d.value; }）。

Answer 2

我发现为了使条形图生成运行良好，以下格式效果最佳。它基于D3后解析的CSV格式。

var dataSet1 = [
  {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
  {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
  {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
  {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
  {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

格式允许将坐标，大小，图例和html链接相互关联。

可以在http://bl.ocks.org/2164562找到一个工作示例。

使用关联数组作为D3的数据

2 个答案: