使用HTML呈現d3 SVG圖表

Here is my current fiddle。使用HTML呈現d3 SVG圖表

我使用從this page取得的股票d3示例。我試圖修改它，以便我可以應用我的自定義CSS以及一些Knockout綁定。我嘗試用中推薦的「foreignObject」和「tspan」替換append（「svg：text」）。它出現在DOM中的「g」元素下，但在瀏覽器中沒有正確顯示。

我目前正在嘗試刪除圈和文本的.append語句，並逐步通過每個「g」元素並使用addClass應用自定義類，如下所示，但它根本不添加它們。

anchorNode.each(function (i, value) { 
    $(this).addClass('entity').addClass('relNode'); 
})

如何在d3庫中使用自定義HTML/CSS？具體來說，這個例子。

來源

2013-12-16 Scott Beeson

我不清楚你想要做什麼。您是否希望使用HTML元素而不是SVG進行強制佈局，還是希望將特殊樣式應用於SVG元素？ –

最好是第一個，但如果可能的話，第二個:) –

第一個不是真的可能，因爲你無法繪製鏈接。對於第二種，您可以像使用HTML一樣使用CSS for SVG。 –

SVG不是免費的。每個元素都允許孩子以及父母。例如文本元素。當涉及到組元素時，這裏是g SVG元素中允許的元素。要使用tspan，您必須將其嵌入到文本中，按照這個fiddle

說到foreignObject，您可以使用它來嵌入外部xml衍生物，它通常與switch語句一起使用，其中switch語句將測試requiredExtensions屬性的第一個true和瀑布下降，如我鏈接到的文檔中所述。這裏有一個 fiddle，它可以證明這取決於你的用戶代理的支持。

var switches = anchorNode.append("svg:switch") 
switches.append("svg:foreignObject") 
    .attr("requiredExtensions", "http://www.w3.org/1999/xhtml") 
    .append("body").attr("xmlns", "http://www.w3.org/1999/xhtml") 
    .append("p").text(function(d, i) { 
    return "a la foreignObject" + (i % 2 == 0 ? "" : d.node.label) 
    }).style("fill", "#555").style("font-family", "Arial").style("font-size", 12); 

switches.append("svg:text").append("svg:tspan").text(function(d, i) { 
    return i % 2 == 0 ? "" : d.node.label 
}).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);

很難提出解決方案，而不知道到底要達到什麼目標，但希望這有助於澄清問題。

來源

2013-12-16 21:48:56 cbayram

我真的只是想把CSS應用到每個「節點」。然而，鑑於上述評論和你的回答，我決定採取一個完全不同的方向。這就是說，這個答案非常詳細，所以我會將其標記爲已接受。謝謝。 –

@ScottBeeson您仍然可以將CSS應用到__text__元素。你可以給它一個.attr（「id」，「yourID」）和/或.attr（「class」，「yourCSSClass」）並在你的樣式表中寫入css規則。您可以像使用.style（「prop」，「value」）注意到的那樣添加樣式聲明。顯然，SVG元素的樣式有所不同，但大多數情況下可以實現相同的結果。定位將通過x，y，dx，dy屬性完成，顏色填充等。 – cbayram

使用HTML呈現d3 SVG圖表

回答

相關問題