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>

更容易弹出当前的输入循环而不必添加填充和d并转换每个元素的attrs，如

.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()方法，虽然我没有尝试过，但我希望它可以在组内创建<path>元素等。

当然，这并不是要设置每个元素的适当属性，但jQuery核心所带来的任何东西都不会。为此，您需要使用一些模板库，例如jade或ICanHaz。

Answer 2

使用d3 .html()方法时，请注意对SVG元素的innerHTML支持（在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");
}

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

2 个答案: