亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 d3.js 將外部組添加到現有的 svg?

如何使用 d3.js 將外部組添加到現有的 svg?

九州編程 2021-09-30 10:50:46
假設我用 d3.js 創建了一個像這樣的 svg:svg = d3.select('.svgContainer').append("svg")    .attr("width", '100%')    .attr("height", '100%')    .call(d3.zoom().on("zoom", function () {      svg.attr("transform", d3.event.transform)   }))   .append("g");我現在想向它添加不同的組(動態地和來自不同的文件)。例如那個:<svg>    <g id="myGroup">        <rect width="100" height="100" fill="blue" />    </g></svg>我知道,我可以像這樣添加整個 svg(假設文件名為 test.svg):d3.xml("test.svg").then(function(xml) {     var svgNode = xml.getElementsByTagName("svg")[0];    svg.node().appendChild(svgNode);  });但是,這會產生以下 DOM:svg -svg --myGroup但是因為我需要相對于主 svg 轉換我的組,所以我需要以下 DOM 結構: svg -myGroup --(eventually more dynamically added groups)我嘗試了以下方法并獲得了正確的 DOM,但該組沒有出現在我的 svg 中:d3.xml("test.svg").then(function(xml) {     var svgGroup = xml.getElementById("myGroup");    svg.node().append(svgGroup);  });編輯:我發現,這應該已經可以工作了,問題是我<defs>的 SVG 內部有幾個關鍵(例如漸變)。當我只添加組時,我丟失了它們。我結束了,把我的<g>周圍包裹起來,<defs>現在一切正常。
查看完整描述

2 回答

?
holdtom

TA貢獻1805條經驗 獲得超10個贊

作為對已接受答案的補充:如果您想要純 D3 解決方案,則可以使用selection.append函數。在你的情況下:


d3.xml(svgfile).then(function(xml) { 

    var svgNode = d3.select(xml).select("#MyGroup");

    svg.append(() => svgNode.node()) ;       

});

或者更短:


d3.xml(svgfile).then(function(xml) { 

    svg.append(() => d3.select(xml).select("#MyGroup").node()) ;       

});

這是使用其他答案中鏈接的維基百科 SVG 的演示:

var svgfile = "https://simple.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg";


var svg = d3.select('body').append("svg")

  .attr("width", '120')

  .attr("height", '20');


d3.xml(svgfile).then(function(xml) {

  var svgNode = d3.select(xml).select("#Wikipedia");

  svg.append(() => svgNode.node());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>


查看完整回答
反對 回復 2021-09-30
?
慕碼人2483693

TA貢獻1860條經驗 獲得超9個贊

你快到了。我已經說明了在這個 codepen 中添加元素的兩種方法。第一種方法的問題在于svgNode它不是 a node,而是 a nodeList。您可以使用循環添加列表中的每個節點,如代碼所示:


...

var toAdd = svgNode.childNodes;

for (var i = 0; i < svgNode.childElementCount; i++){     

  svg.node().appendChild(toAdd[i]);

}

...

關于第二種方法,我不能說有什么問題。我從不同的 svg 文件導入了一個路徑,它顯示在下部。我更改的唯一細節是我明確設置了 svg 元素的大小,而不是100%. 是否有可能因為它在可見部分之外而沒有被渲染?


查看完整回答
反對 回復 2021-09-30
  • 2 回答
  • 0 關注
  • 477 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號