 <p>You are making the polygon with in the rect DOM which is incorrect You should be attaching the polygon to the svg So it should be </p> <pre><code>svgContainer.append("polygon") </code></pre> <p>corrected code below:</p> <pre><code>var svgContainer = d3.select("body").append("svg") var rectangle = svgContainer.append("rect") .style("stroke", "black") .style("fill", "none") .attr("x", 50) .attr("y", 50) .attr("width", 100) .attr("height", 100); var cir = svgContainer.append("polygon") // attach a polygon to the svg .style("stroke", "black") // colour the line .style("fill", "none") // remove any fill colour .attr("points", "30,50,100,150,100,150"); // x,y points </code></pre> <p>Working fiddle <a href="http://jsfiddle.net/cyril123/pgerw8va/" rel="nofollow">here</a> </p> <p>To make the polygon appear within the rectangle you will need to provide the polygon points/coordinates accordingly. Just by making the polygon within the rect DOM element will not make it show withing the rectangle. Hope this clears your concern.</p>