从数组在d3中创建条形图时出现问题

Trouble creating a bar chart in d3 from an array

本文关键字：问题 条形图 创建 数组 d3      更新时间：2023-09-26

我有一个json文件，我循环遍历该文件以获取特定的键/值对。输出被推送到以下形式的数组：

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

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

我正在为这个看似简单的任务而挣扎。如有任何建议，我们将不胜感激。

提前谢谢。

按如下方式构造输出数组可能更容易：

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

然后，在d3代码中，您可以使用这个this数组创建数据，并简单地返回适当的信息，这取决于您是否需要确定条形标签或其高度。这有道理吗？

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

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]})
}

此解决方案假设每对的密钥和值彼此正确，并且顺序正确。

相关文章：