如何添加嵌套svg元素dom与d3.js

Question

我已经环顾四周，似乎这可能是不可能的，但它将是惊人的，如果你可以使用d3的选择能力来抓取一整块svg标记，并使用它作为架构，你想要复制几次。例子:

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

将更容易弹出到当前的enter循环中，而不必像

那样为每个元素添加fill和d和transform属性。

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

我想我希望d3更像jquery。有人知道怎么做吗?

Answer 1

当使用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");
}

Answer 2

d3有一个.html()方法，虽然我没有尝试过，但我希望它能在一个组内创建<path>元素等。

当然，这不会考虑为每个元素设置适当的属性，但jQuery核心也不会。为此，您需要使用一些模板库，如jade或ICanHaz。