Accepted answer

The solution was to comment out/remove the width and height attribute values and instead add the following two lines:

//- .attr("width", width + margin.left + margin.right)
//- .attr("height", height + + margin.bottom)
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 500")


Check the svg is drawn with parent height and width.


var parentDiv = document.getElementById("parentDiv");
var svg ="svg");

function redraw(show) {

  // Extract the width and height that was computed by CSS.
  var width = parentDiv.clientWidth;
  var height = parentDiv.clientHeight;
  // Use the extracted size to set the size of an SVG element.
    .attr("width", width)
    .attr("height", height);
  if (show === false) {'visibility', 'hidden');
  } else {'visibility', 'visible');

  svg.attr("style", "outline: thin solid red;")
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("r", 20);

// Draw for the first time to initialize.

// Redraw after sometime
setTimeout(redraw, 1000);
#parentDiv {
  height: calc(100vh - 100px); /** output container is small for display */ 
  width: calc(100vw - 100px);
  display: block;
  border: 1px solid red;
<script src=""></script>
<div id="parentDiv"></div>

Related Query

More Query from same tag