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
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.
- d3.js adding polygon inside rectangle
- Is it possible to determine if a GeoJSON point is inside a GeoJSON polygon using JavasScript?
- How to find if point is inside polygon in d3.js
- polygon weird redrawing by adding & dragging dynamic points (flickering)
- Text inside non-transparent rectangle is not visible
- Adding text to a rectangle
- D3js click inside polygon
- Aligning paragraphs inside rectangle
- Adding a correctly sized rectangle behind text
- What format polygon does D3plus largest rectangle require?
- Draw polygon inside of the SVG defined viewport
- How to wrap the text inside the SVG polygon without cutting the text
- Adding Text inside SVG icon for Google Maps API
- Network around rectangle with text inside in d3
- how to plot the image inside the polygon in d3
- Adding nodes inside svg rect using d3 force layout
- Adding a link inside scrolling popup disables all click events?
- how to put dynamic data text inside rectangle in d3
- Adding polygon to d3 vornoi causing an error
- Adding svg text inside svg circle in d3js
- how to auto-adjust the height of an rectangle to contain the text inside it in d3 tree
- redrawing polygon after adding points on edges and dragging those points draws weird lines
- Adding text to rectangle elements using D3 / SVG
- Putting tspan inside rectangle D3JS SVG
- adding text to circles in a rectangle
- Adding a nvd3 sparkline chart inside a dynamic table
- Adding new nodes to Force-directed layout
- D3 Appending Text to a SVG Rectangle
- Adding FontAwesome icons to a D3 graph
- svg / d3.js rounded corners on one side of a rectangle
More Query from same tag
- Mutable object properties behavior
- in Sankey diagram: make paths "as short as possible"?
- d3 .csv with a lot of data, draw just for one month
- Brush selection in Box plot(d3.js)
- Can I update an ongoing d3 transition on drag
- d3.js: enter-update-exit pattern - Old points not removed
- Does d3's transitions and animations use requestAnimationFrame?
- Detect Graph Edges Overlapping
- How to define the node entering position in D3 js force layout
- D3JS: Interpolating missing time value as null in time series data
- Insert values in D3 Calendar visualization
- Where can in find the locale objects for d3.js for different countries
- arrows and text following click and hover
- d3.js drawing circles with throbbing outer lines
- How to use enter(), exit() and update with horizontal "stacked" chart
- Bind external svg to data
- Why does d3 say some nodes are missing after applying link force?
- d3.js problems with reading dataset
- Render only SVG nodes of data that is currently visible?
- How to Export SVG graph to pdf using html canvas
- d3 set multiple attributes with one function
- Add labels to d3 line graph
- Why are cross-origin Image requests blocked by Cytoscape.js but not by d3.js?
- Implementing <div> tooltips via d3 within an <svg> container
- Group D3 legend items
- D3 - issue with applying scroll to legends container with in svg
- D3 update selections not updating text
- D3.js Chart Transition Erroring