CODEWITHSUNDEEP
htmldomd3.js
theGreenCabbage
theGreenCabbage

Reputation: 4845

Generating custom elements in d3

I am trying to create dom that is the following:

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

Basically two rectangle elements within a value label and geom class.

I have the following:

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

Issue with this code that this is the HTML it generates:

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

How do I have the class value-labels surround my two rectangles?

Upvotes: 0

Views: 222

Answers (1)

Mark
Mark

Reputation: 108522

Keep a reference to the g you append and append the rects to it:

@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);

Upvotes: 2

Related Questions