Question

我正在尝试使用d3.js可视化一组生成的XML数据，虽然我确信这将是显而易见的事情，但我遇到了一个我最初认为很简单的问题 - 显示节点名称使用从XML节点获取的属性而不是实际的XML节点名称。

例如，使用此XML：

<data>
 <foo id="123" name="fooname1" type="footype1">
   <bar>Hello</bar>
 </foo>
 <foo id="456" name="fooname2" type="footype2">
   <bar>World</bar>
 </foo>
</data>

我试图将“foo”节点显示为带有文本“fooname1”和“fooname2”的圆圈（其他属性将在稍后使用），而不是显示“foo”。我一直在尝试的是这样的事情（减半径，鼠标悬停和文本锚点）：

var node = svg.selectAll(".node")
   .data(nodes)
   .enter().append("g")
   .attr("class","node")

   node.append("circle")
   node.append("text")
     .text(function(d) {return d.lastElementChild ? d.attributes.nodeValue:d.localName+": "+d.textContent ; })

这个想法是，如果它不是列表中的最后一个节点，则使用属性中的名称，如果不是，则显示节点内容，但d.attributes.nodeValue从不返回任何内容和d.attributes [1]。 nodeValue是我的第二个想法，返回“d.attributes [1]未定义”。

console.log（节点）的控制台输出显示属性正被加载到对象元素中，并且位于如下结构中：

 [object element]
    attributes: [object MozNamedAttrMap]
      0 [object Attr]
        nodeName = id
        nodeValue=123
      1 [object Attr]
        nodeName = name
        nodeValue = fooname1
      2 [object Attr]
        nodeName = type
        nodeValue = footype1
  localName = foo
  textContent= ""

所以数据存在，我只是没有正确地提取它。我想我可能会尝试以错误的方式将其拉入，但使用d3.selectAll（d.attributes）的某些变体似乎也没有返回任何内容 - 我只是以错误的方式进行此操作吗？

编辑：节点创建如下：

d3.xml(URL,"application/xml",function(xml) {
var nodes = self.nodes = d3.select(xml).selectAll("*")[0]
});

其中URL是生成XML的Web服务的生成路径。对于链接有类似的处理，然后将其转换为强制定向布局 - 这几乎取决于基于强制定向XML的一些示例。

Answer 1

想出来，正如预测的那样，这是显而易见的！

我试图使用d.attributes.Name引用Name属性，该属性确实返回了包含数据的对象但我无法引用它，例如d.attributes.Name.nodeValue将返回“d.attributes.Name未定义”。我没有意识到的是属性具有不同的nodeType（属性节点为2），因此无法以与常规节点相同的方式访问，而是使用d.getAttribute（“Name”）正确返回数据

我意识到节点类型与此答案的差异JavaScript getAttribute not working，对节点类型的一些进一步研究使我https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute。

在d3.js中使用XML属性

1 个答案: