如何使用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

回答

相关问题