2.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejemplo 2</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <div id="chart" style="width:100%;height: 400px;border:1px solid gray;"></div>
    <script>
        function drawChart(){
            console.log("a")
            var width = document.getElementById('chart').offsetWidth;
            var height = document.getElementById('chart').offsetHeight;
            var padding = 10;
            var realWidth = width - (padding * 2)
            var realHeight = height - (padding * 2)

            d3.select("svg").remove();

            var svg = d3.select("#chart").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + padding/2 + "," + padding/2 + ")");

            svg.append("rect")
                .attr('class', 'bar')
                .attr('x', realWidth/4)
                .attr('y', realHeight/4)
                .attr('width', realWidth/2)
                .attr('height', realHeight/2)
        }

        window.onresize = drawChart;

        drawChart();

    </script>
</body>
</html>

<!--

-->