如何使用d3.js添加嵌套的svg元素到dom

我環顧四周，看起來這可能是不可能的，但如果您可以使用d3的選擇功能來抓取整個svg標記塊並將其用作您想要多次複製的結構的模式。例如：如何使用d3.js添加嵌套的svg元素到dom

<g class='nice'> 
<g class="slice"> 
    <path fill="#3182bd" d="M1.836909530733566e-15,-30A30,30 0 0,1 25.98076211353316,-14.999999999999995L0,0Z"></path> 
    <text transform="translate(10.500000000000002,-18.186533479473212)" text-anchor="middle">bla2</text> 
</g> 
<g class="slice"> 
    <path fill="#6baed6" d="M25.98076211353316,-14.999999999999995A30,30 0 0,1 25.980762113533153,15.000000000000007L0,0Z"></path> 
    <text transform="translate(21,4.6629367034256575e-15)" text-anchor="middle">bla</text> 
</g>

會更容易剛剛流行到當前輸入迴路，而不必爲每個元素像

.append('path') 
.attr('transform', 'M25.98076211353316,-14.999999999999995A30,30 0 0,1 25.980762113533153,15.000000000000007L0,0Z') 
.attr(.... etc etc etc

我想補充的填充和d和改造ATTRS我希望d3更像jquery。任何人都知道你如何做到這一點？

來源

2013-03-08 Peter Segerstrom

使用d3 .html()方法時，請注意innerHTML支持SVG元素（safari，IE不支持）。

但是，您可以使用innerSVG polyfill獲得相同的效果。詳情請參閱https://code.google.com/p/innersvg/。它只是工作。

使用方法如下：

D3Selection.append("g").node().innerSVG = "<circle class=...";

更好的方法可以引入方法上提供D3選定的元素，並使用該嵌套所需的結構。例如：

function appendCircles(group) { 
    group.append("circle").attr("class", "circle1"); 
    group.append("circle").attr("class", "circle2"); 
}

來源

2014-03-10 20:06:56

這是更有針對性的面向對象的方法。我想我已經習慣了以我將要操作的語言創建模板的方便性......但這是最優雅的解決方案EG標準的oop實踐:) – 2014-03-11 00:13:29

d3有一個.html()方法，雖然我還沒有嘗試過，但我期望它可以在組內創建<path>元素等。

當然，這不會考慮設置每個元素的適當屬性，但jQuery核心也不會包含任何內容。爲此，您需要使用一些模板庫，如jade或ICanHaz。

來源

2013-03-08 18:33:53 meetamit

如何使用d3.js添加嵌套的svg元素到dom

回答

相關問題