1

我环顾四周，似乎这可能是不可能的，但如果您可以使用 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 并转换属性，例如

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

我想我希望 d3 更像 jquery。任何人都知道你怎么能做到这一点？

4

2 回答 2

0

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

当然，这不会负责为每个元素设置适当的属性，但 jQuery 核心附带的任何东西也不会。为此，您需要使用一些模板库，例如jam或ICanHaz。

于 2013-03-08T18:33:53.530 回答
0

使用 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");
}
于 2014-03-10T20:06:56.443 回答