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

Question

I have a json file that I loop through for specific key/value pairs. The output is pushed to an array of the form:

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

What I'd like to do is generate a column chart in d3.js where the key corresponds to the bar label, and the heigh corresponds to the value.

I'm struggling with this seemingly simple task. Any advice would be appreciated.

Thanks in advance.

Answer 1

Might be easier to structure the output array as follows:

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

Then, in the d3 code, you can create data using this this array, and simply return the appropriate information depending on whether you need to determine the bar label or its height. Does that make sense?

When writing the bar labels, for instance, it would look something like this:

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

Without knowing exactly what the json file looks like, I can't tell you how to construct the output array in this form, but given that you have an array that looks like

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

you could construct the new output array like this:

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

This solution assumes that the key and value for each pair are right by each other and in the right order.