D3js with element base on data

Question

I am drawing a graph where the elements may differ, for example:

[
{id: 1, type: "type1", name: "Some name" },
{id: 2, type: "type2", name: "Some name" },
{id: 3, type: "type2", name: "Some name" },
{id: 4, type: "type1", name: "Some name" }
]

Now if the element is of type=type1 would I like it to add

<g>
<rect width="10" height="10" fill="blue" />
<text x="0" y="0" fill="red">Some name</text>
</g>

if type=type2

<g>
<rect width="10" height="10" stroke="blue" />
<rect x="15" y="15" width="10" height="10" stroke="blue" />
<text x="0" y="0" fill="red">Some name</text>
</g>

How would I be able to do this using D3js?

Answer 1

I agree with Lars...but...if what you are really looking for is a cool outliner, look no more...I offer you the Kitchen Sink Outliner ...with its own kitchen sink scale system ;-)

d1 = 30;
d2 = d1 + 5;

NOTE:...been working too hard...need some levity...