I want to display the legend (caption?) of some data. For each part of the legend, I append a rect and a p to a parent division. The problem is that rect are not showing up.

Here is my code:

var groups = {{ groups|safe }};
groups.forEach(function(group, i) {
    var div = d3.select("#collapse-legend");
    div.append("rect")
        .attr("width", 17)
        .attr("height", 17)
        .style("fill-opacity", 1)
        .style("fill", function (d) { return c(i); });
    div.append("p").text(group)
});

Now, when I check the content of my web page, I get both rect and p, but rect:

1. is not showing up
2. seems to have a width of 0 (showing its area with firefox)

Is there some mistake in my code? Are there better ways to achieve this? I am very new to javascript and d3.js so please be indulgent ^^

Update

So this is what I ended with.
HTML:

<div ...>
    <svg id="legend-svg"></svg>
</div>

JavaScript:

// set height of svg
d3.select("#legend-svg").attr("height", 18*(groups.length+1));

// for each group, append rect then text
groups.forEach(function(group, i) {
    d3.select("#legend-svg").append("rect")
        .attr("y", i*20)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill-opacity", 1)
        .style("fill", function (d) { return c(i); });
    d3.select("#legend-svg").append("text")
        .attr("x", 25)
        .attr("y", i*20+15)
        .text(group);
});

I want to display the legend (caption?) of some data. For each part of the legend, I append a rect and a p to a parent division. The problem is that rect are not showing up.

Here is my code:

var groups = {{ groups|safe }};
groups.forEach(function(group, i) {
    var div = d3.select("#collapse-legend");
    div.append("rect")
        .attr("width", 17)
        .attr("height", 17)
        .style("fill-opacity", 1)
        .style("fill", function (d) { return c(i); });
    div.append("p").text(group)
});

Now, when I check the content of my web page, I get both rect and p, but rect:

1. is not showing up
2. seems to have a width of 0 (showing its area with firefox)

Is there some mistake in my code? Are there better ways to achieve this? I am very new to javascript and d3.js so please be indulgent ^^

Update

So this is what I ended with.
HTML:

<div ...>
    <svg id="legend-svg"></svg>
</div>

JavaScript:

// set height of svg
d3.select("#legend-svg").attr("height", 18*(groups.length+1));

// for each group, append rect then text
groups.forEach(function(group, i) {
    d3.select("#legend-svg").append("rect")
        .attr("y", i*20)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill-opacity", 1)
        .style("fill", function (d) { return c(i); });
    d3.select("#legend-svg").append("text")
        .attr("x", 25)
        .attr("y", i*20+15)
        .text(group);
});

• javascript
• jquery
• d3.js

• Have you tried setting the x and y attributes of the rect? – Lars Kotthoff Commented Feb 24, 2015 at 14:45
• Yes I tried that, nothing changed – pawamoy Commented Feb 24, 2015 at 15:08

2 Answers 2

SVG elements like <rect> cannot be direct children of html <div> elements. You must put them inside an <svg> container element.

SET X + Y values for rect :

.attr("x", 50)
.attr("y", 50)