Question

我正在尝试创建以下内容：

<g class="geoms">
    <g class="value-labels">
        <rect class="text" width="10" height="10" x="10" y="10"></rect>
        <rect class="text" width="10" height="10" x="10" y="10"></rect>
    </g>
</g>

基本上是值标签和geom类中的两个矩形元素。

我有以下内容：

    @svg = d3.select("body").append("g").attr("class", "geoms")
    @svg.append("g").attr("class", "value-labels")
    @svg.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10)
    @svg.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10)

此代码的问题是这是它生成的HTML：

<g class="geoms">
    <g class="value-labels"></g>
    <rect class="text" width="10" height="10" x="10" y="10"></rect>         
    <rect class="text" width="10" height="10" x="10" y="10"></rect>  
</g>

如何将班级value-labels包围在我的两个矩形中？

Answer 1

保留对您追加的g的引用，并将rect附加到其中：

@svg = d3.select("body").append("g").attr("class", "geoms");
var g = @svg.append("g").attr("class", "value-labels");
g.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10);
g.append("rect").attr("class", "text").attr("width", 10).attr("height", 10).attr("x", 10).attr("y", 10);

在d3中生成自定义元素

1 个答案: