Javascript 使用D3获取嵌套XML数据

我的excel文件名为

thefilehere.xml

，包含以下信息：

<Main>
  <Name>Rotunda</Name>
  <Age>43</Age>
</Main>
<Main>
  <Name>John</Name>
  <Age>22</Age>
</Main>

---

要使用

d3.xml

获取数据，您必须从本地服务器提供

thefilehere.xml

---

如果

thefilehere.xml

只是与HTML&JS位于同一目录中的文件，那么这将不起作用。

首先，我们将更改您的xml结构，将所有数据包装在一个标记中。传统上，此标记的名称为

data

：

<data>
    <main>
        <name>Rotunda</name>
        <age>43</age>
    </main>
    <main>
        <name>John</name>
        <age>22</age>
    </main>
</data>

但是，由于在

内部有两个带有数据的标记，因此使用

textContent

获取这些数据会很困难。Mike Bostock的解决方案更有趣：

xml = [].map.call(xml.querySelectorAll("main"), function(d) {
    return {
        name: d.querySelector("name").textContent,
        age: +d.querySelector("age").textContent
    };
});

现在，您只需要在代码中使用

name

和

age

，如下所示：

d3.xml("thefilehere.xml", function(err, xml) {

    xml = [].map.call(xml.querySelectorAll("main"), function(d) {
        return {
            name: d.querySelector("name").textContent,
            age: +d.querySelector("age").textContent
        };
    });

    d3.select("body")
        .selectAll("div")
        .data(xml)
        .enter()
        .append("div")
        .attr("class", "myDiv")
        .style("width", function(d) {
            return d.age * 5 + "px";
        })
        .text(function(d) {
            return d.name
        });
});

d3.xml(url, (error, xml) => {
  let xmlDoc = d3.select(xml.documentElement);   // wrap the XML document in a D3 selection

  d3.select("body")
    .selectAll("div")
    .data(xmlDoc.selectAll("Main").nodes())      // bind the XML's nodes as data
    .enter().append("div")
      .attr("class", "myDiv")
      .style("width", d => d3.select(d).select("Age").text() * 5 + "px")
      .text(d => d3.select(d).select("Name").text());
});

---

由于我不能在堆栈代码段中使用

d3.xml

，下面是一个工作代码的例子：

这个答案添加并建立在@GerardoFurtado在他的著作中已经完成的工作的基础上，该著作非常好，非常适合许多情况。然而，由于经常希望留在D3内不破坏其基本的操作概念，这里是我的D3，至少是主要的解决方案

由于D3不仅限于处理SVGDOM树，而且还能够处理其他XML DOM，因此您可以轻松地在加载的XML文件上使用其选择。相关代码可能如下所示：

d3.xml("thefilehere.xml", function(err, xml) {

    xml = [].map.call(xml.querySelectorAll("main"), function(d) {
        return {
            name: d.querySelector("name").textContent,
            age: +d.querySelector("age").textContent
        };
    });

    d3.select("body")
        .selectAll("div")
        .data(xml)
        .enter()
        .append("div")
        .attr("class", "myDiv")
        .style("width", function(d) {
            return d.age * 5 + "px";
        })
        .text(function(d) {
            return d.name
        });
});

d3.xml(url, (error, xml) => {
  let xmlDoc = d3.select(xml.documentElement);   // wrap the XML document in a D3 selection

  d3.select("body")
    .selectAll("div")
    .data(xmlDoc.selectAll("Main").nodes())      // bind the XML's nodes as data
    .enter().append("div")
      .attr("class", "myDiv")
      .style("width", d => d3.select(d).select("Age").text() * 5 + "px")
      .text(d => d3.select(d).select("Name").text());
});

执行

d3时，在
.style（）
和
.text（）
中选择（d）

，需要注意的是，这实际上是从XML的DOM而不是HTML的DOM中进行选择。由于我们将

xmlDoc.selectAll（“Main”）

中选定的元素绑定为数据，因此在本例中，

d

将引用XML的

元素。有了这个选择，您可以通过执行子选择以及通过调用

.text（）

和更多（如果需要）访问其内容来利用D3的功能

请查看以下代码片段，以获得一个可用的演示：

//设置数据以模拟从文件加载。
//在这个答案的推理过程中，可以忽略这一点；主要逻辑如下。
const url=url.createObjectURL（新Blob([
`
圆形大厅
43
约翰
22
`
]));
//设置结束。
//主要逻辑
xml（url，（错误，xml）=>{
让xmlDoc=d3.select（xml.documentElement）；
d3.选择（“主体”）
.selectAll（“div”）
.data（xmlDoc.selectAll（“Main”）.nodes（））
.enter（）.append（“div”）
.attr（“类别”、“myDiv”）
.style（“宽度”，d=>d3.select（d.select（“年龄”）.text（）*5+“px”）
.text（d=>d3.select（d.select（“名称”）.text（））；
});
.myDiv{
背景颜色：浅蓝色；
保证金：4倍；
}
回答得好。有趣的是，他们说
URL.createObjectURL（）
是一项实验性技术，但所有主流浏览器都支持它。。。
d3.xml(url, (error, xml) => {
  let xmlDoc = d3.select(xml.documentElement);   // wrap the XML document in a D3 selection

  d3.select("body")
    .selectAll("div")
    .data(xmlDoc.selectAll("Main").nodes())      // bind the XML's nodes as data
    .enter().append("div")
      .attr("class", "myDiv")
      .style("width", d => d3.select(d).select("Age").text() * 5 + "px")
      .text(d => d3.select(d).select("Name").text());
});