javascript 使用关联数组作为 D3 的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9589768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using an associative array as data for D3
提问by Malcolm Crum
I have a very simple D3 example that first reads data into an associative array, then displays it in a bar graph.
我有一个非常简单的 D3 示例，它首先将数据读入关联数组，然后将其显示在条形图中。
I can't seem to get anything to display using this method though. Instead, I have to insert a task in between: Read the data into an associative array, copy that data into a simple array, then display the bar graph using the simple array.
不过，我似乎无法使用此方法显示任何内容。相反，我必须在两者之间插入一个任务：将数据读入关联数组，将该数据复制到简单数组中，然后使用简单数组显示条形图。
chart.selectAll("div")
.data(genreAssociative)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
The above does not work.
以上是行不通的。
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; });
The above does; using a simple array as an intermediary. Is there a special way to iterate over an associative array instead of a standard array?
以上是；使用一个简单的数组作为中介。有没有一种特殊的方法来迭代关联数组而不是标准数组？
回答by Lars Kotthoff
You can use the functions d3.valuesor d3.entriesto work directly with associative arrays. You simply need to take it into account in the functions that set attributes (e.g. function(d) { return d.value; }).
您可以使用函数d3.values或d3.entries直接处理关联数组。您只需要在设置属性的函数中将其考虑在内（例如function(d) { return d.value; }）。
回答by Information Technology
I found that in order for bar chart generation to work well, the following format works best. It's based on the the D3 post-parsed CSV format.
我发现为了使条形图生成正常工作，以下格式效果最好。它基于 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"}];
The format allows for the correlation of coordinates, magnitudes, legends and html links to each other.
该格式允许坐标、幅度、图例和 html 链接相互关联。
A working example can be found at: http://bl.ocks.org/2164562.
可以在以下位置找到工作示例：http: //bl.ocks.org/2164562。
