是否可以在d3.js中導入svg形狀？

第一天用d3.js，進展順利，但我需要將我的佔位符圓形更改爲更復雜的小東西。是否可以在d3.js中導入svg形狀？

可以將我在Illustrator中創建的SVG形狀「導入」到d3.js圖表中嗎？

我知道我可以在D3重繪...但我的頭很痛，現在......呃......

這是一個簡單的泡了一點：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="77px" height="41px" viewBox="0 0 77 41" enable-background="new 0 0 77 41" xml:space="preserve"> 
<path fill-rule="evenodd" clip-rule="evenodd" fill="#999999" d="M0,13C0,5.82,5.82,0,13,0h51c7.18,0,13,5.82,13,13s-5.82,13-13,13 
    H47l-7,15l-7-15H13C5.82,26,0,20.18,0,13z"/> 
</svg>

之有作爲形狀導入？

或者有沒有辦法直接在d3js中翻譯該路徑？

謝謝！

來源

2013-08-07 rolfsf

[這個問題]（HTTP： //stackoverflow.com/questions/15388444/import-and-parse-svg-file-in-d3-js）可能會有所幫助。 –

如果通過「導入」您的意思是頁面標記的一部分，然後由您的d3代碼使用，那麼是的，你可以使用svg defs element來保存自定義形狀的定義。再後來在你的代碼中創建一個use元素引用它：

var node = svg.selectAll("g.node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 

node.append("use") 
    .attr("xlink:href","#myshape")

這裏是上述辦法的一個完整的例子。我用Inkscape的，但概念是相同的：

http://bl.ocks.org/explunit/5988971

注意的是，在SVG定義XLink命名空間是很重要的use元件能夠正常工作，而且我看你有沒有它你的代碼已經：

xmlns:xlink="http://www.w3.org/1999/xlink"

如果通過「導入」指的是即時加載，則需要採用不同的方法，正如@LarsKotthoff所建議的那樣。但是這聽起來像你只是想重用一個現有的形狀定義，而上述方法可以讓你做到這一點。 <g>元素設置形狀的位置，然後添加子節點<use>以拉入先前定義的實際形狀。

形狀的定義是在體內的svg元素中，而不是在JavaScript本身。這與許多D3.js示例有不同，後者具有由JavaScript代碼動態創建的svg元素。

兩者之間的唯一聯繫是，你把在href（「MyShape的」，在這種情況下）的字符串ID在defs部分的ID相符：

node.append("use").attr("xlink:href","#myshape")

來源

2013-08-07 02:56:02 explunit

看起來應該可以工作！所以SVG形狀被放置在BODY中並由javascript引用，但是定義不在JavaScript本身中？ – rolfsf

@rolfsf是的。請參閱上面添加的兩段以及帶完整工作代碼的bl.ocks.org鏈接。 – explunit

終於四處嘗試附加那個形狀......它有點類似的作品，但我無法弄清楚如何定位它。本來我有一個根據數據定位的圓圈。我用一個「g」代替圓圈，然後追加形狀......試圖將原始的x和y放入一個變換 - 翻譯，但不工作？線索？（複雜的圖表 - 將盡量簡化併發布） – rolfsf

是否可以在d3.js中導入svg形狀？

回答

相關問題