How to import XML data using d3.js?

Question

can someone provide a basic example how to import data from an XML file using d3?

My XML file looks like this:

    <data>
        <value>71</value>
        <value>12</value>
        <value>44</value>
        <value>88</value>
    </data>

How can I add these values to a data array? Here is what I tried so far:

    d3.xml("values.xml", function(xml) {
     d3.select(xml).selectAll("data").each(function(data) {
        d3.select(data).selectAll("value");
        //add data to array?;
        };
});
    //use Array

Answer 1

The XML object that is passed into the callback is the root element of the XML DOM (see https://github.com/mbostock/d3/wiki/Requests#wiki-d3_xml ), and therefore you need to process it using the JavaScript XML/DOM access facilities.

I have written a small example that shows how to use d3.xml to create a bar chart (based on the original d3 barchart example http://mbostock.github.com/d3/tutorial/bar-1.html ):

Link to see example: http://bl.ocks.org/2772585

Link with XML code: https://gist.github.com/lgrammel/2772585