无法在数组中创建d3中的条形图

时间:2016-05-12 18:29:28

标签: javascript d3.js

我有一个json文件,我循环访问特定的键/值对。输出被推送到以下形式的数组:

var output = ["key1", "value1", "key2", "value2", ... "key(n)", "value(n)"]

我想要做的是在d3.js中生成一个柱形图,其中键对应于条形标签,而高度对应于该值。

我正在努力应对这项看似简单的任务。任何建议将不胜感激。

提前致谢。

1 个答案:

答案 0 :(得分:0)

可能更容易构造输出数组,如下所示:

var output = [{"key": "key1", "value": "value1"}, {"key": "key2", "value": "value2"}, ...]

然后,在d3代码中,您可以使用此数组创建数据,并根据您是否需要确定条形标签或其高度来简单地返回相应的信息。这有意义吗?

例如,在编写条形标签时,它看起来像这样:

var labels = d3.selectAll("labels")
    .data(output)
    .enter()
    .append("g")
    .text( function(d,i) {
        return d.key;
    })

在不知道json文件的确切内容的情况下,我无法告诉您如何以这种形式构造输出数组,但是假设您有一个看起来像

的数组
var original_output = ["key1", "value1", "key2", "value2", ... "key(n)", "value(n)"]

你可以像这样构造新的输出数组:

var new_output = [];
for (var i = 0; i < original_output.length; i=i+2) {
    new_output.push({"key": original_output[i], "value": original_output[i + 1]})
}

此解决方案假定每对的键和值彼此正确并且顺序正确。