xxxxxxxxxx<head> <meta charset="utf-8"> <meta name ="viewport" content="width=device-width"> <title>general update pattern-webpage</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { position: fixed; left: 0 px; right: 0 px; top: 0 px; bottom: 0 px; margin: 0 px; } .graph-svg-component { background-color: AliceBlue; } </style></head><body> <script> function myResponsiveComponent(container, props, bars){ const {width, height} = props; let svg = container.selectAll('svg').data([null]); svg = svg.enter().append('svg') .merge(svg) .attr('width', width) .attr('height', height) .attr("class", "graph-svg-component"); const rect = svg.selectAll('rect').data([null]); rect .enter().append('rect') .attr('rx', 100) .merge(rect) .attr('width', width) .attr('height', height); const bar = svg.selectAll('.p') //class: .x .data(bars); bar .merge(bar.enter().append('rect') .attr('class', 'p') .attr('y', 100) .attr('width', 70) .attr('height', 300) .attr('fill', 'green')) .attr('x', function(d){ return d; }); } function render(bars) { myResponsiveComponent(d3.select('body'), { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }, bars); } render([400, 800]); window.addEventListener('resize', render); console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); //render([285, 186]); //Enter //render([51, 126, 200]); //Enter + Update //render([3]); //Exit </script></body> https://d3js.org/d3.v4.min.js