CODEWITHSUNDEEP
d3.js
gorants
gorants

Reputation: 21

d3.js adding polygon inside rectangle

How to add polygon inside rectangle?, below is the code i have but it is not showing polygon inside rectangle. could you please help me.

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 =   rectangle.append("polygon")       // attach a polygon
    .style("stroke", "black")  // colour the line
    .style("fill", "none")     // remove any fill colour
    .attr("points", "30,50,100,150,100,150");  // x,y points

Upvotes: 0

Views: 2265

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

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 

svgContainer.append("polygon")

corrected code below:

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

Working fiddle here

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.

Upvotes: 1

Related Questions