JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<button onclick="myfunc" >Toggle polygon</button>
<button onclick="func">toggle rect</button>
</body>

JavaScript

var vis = d3.select("body").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,50])
        .range([500,0]),

poly = [{"x":0.0, "y":25.0},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];
        
var path;
        
d3.select('button').on('click', function myfunc() {


    if ( path ) {
        path.remove();
        // Remove dots
        path = null;
    } else {

path=vis.select("polygon")
    .data([poly])
  .enter().append("polygon")
    .attr("points",function(d) { 
        return d.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
    .attr("stroke","black")
    .attr("stroke-width",2);
    
    }

});



var rect;

d3.select('button').on('click', function func() {


    if ( rect ) {
        rect.remove();
        // Remove dots
        rect= null;
    } else {

rect = vis
    .append("rect")
    .attr("x", 165)
    .attr("y", 25)
    .attr("height", 100)
    .attr("width", 100)
    .attr("fill", "#420a91")
    .attr("stroke", "#FF00FF")
    .attr("stroke-width", "4")
    .attr("stroke-dasharray", "10,10");
    
    }

});