使用HTML渲染d3 SVG圖形

Question

這是我目前的小提琴 。

我正在使用從此頁面獲取的股票d3示例。 我正在嘗試對其進行修改，以便可以應用我的自定義CSS以及某些敲除綁定。 我曾嘗試更換追加：用“foreignObject”和“TSPAN”（“SVG的文本”）中的建議， 這個帖子 。 它顯示在DOM中“ g”元素下，但未正確顯示在瀏覽器中。

我目前正試圖刪除圓圈和文本的.append語句，並逐步遍歷每個“ g”元素，並使用addClass應用自定義類，如下所示，但它根本沒有添加它們。

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

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

Answer 1

SVG並非所有人都免費。 每個元素都允許孩子以及父母。 例如， tspan位於svg 文本元素內。 關於group元素，這里是g SVG元素內允許的元素。 要使用tspan，您必須按照此小提琴將其嵌入文本中

如果涉及到ForeignObject ，則在用戶代理（瀏覽器）支持它的情況下 ，可以使用它嵌入xxml之類的外部xml 衍生物 。 它通常與switch語句一起使用，其中switch語句將測試我首先鏈接到的文檔中提到的true和瀑布向下的requiredExtensions屬性。 這是一個小提琴 ，它根據用戶代理的支持進行演示。

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);

在不確切知道您要實現的目標的情況下，很難提出解決方案，但是希望這可以幫助您澄清一些問題。