在d3.js中使用XML屬性

我試圖使用d3.js將一組生成的XML數據可視化，雖然我確信這將是明顯的東西，但我遇到了一個問題，最初認爲會很簡單 - 使用從XML節點獲取的屬性顯示節點名稱，而不是實際的XML節點名稱。在d3.js中使用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>

我試圖展示「富」節點與文本「fooname1」和「fooname2」圈（其他屬性將在以後使用）而不是他們都顯示「富」。我一直在嘗試的是類似這樣的東西（減半徑，鼠標懸停和文本錨點）：

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的一些示例。

來源

2014-01-08 Dan C

你如何創建'節點'？ –

想象一下，正如預測的那樣，這是明顯的！

我試圖引用名稱屬性使用d.attributes.Name返回一個包含數據的對象，但我然後無法引用它，例如， d.attributes.Name.nodeValue將返回「d.attributes.Name未定義」。我沒有意識到的是，屬性具有不同的節點類型（對於屬性節點是2），因此不能以與常規節點相同的方式訪問，而是使用d.getAttribute（「Name」）正確返回數據。

我意識到節點類型的差異，從這個答案JavaScript getAttribute not working和一些進一步的研究節點類型導致我https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute。

來源

2014-01-09 19:52:35

在d3.js中使用XML屬性

回答

相關問題