Develop Reference

Need help to make my waffle chart responsive [duplicate]

Assume I have a histogram script that builds a 960 500 svg graphic. How do I make this responsive so on resize the graphic widths and heights are dynamic?
<script>
var n = 10000, // number of trials
m = 10, // number of random variables
data = [];
// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
for (var s = 0, j = 0; j < m; j++) {
s += Math.random();
}
data.push(s);
}
var histogram = d3.layout.histogram()
(data);
var width = 960,
height = 500;
var x = d3.scale.ordinal()
.domain(histogram.map(function(d) { return d.x; }))
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
.range([0, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("rect")
.data(histogram)
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return height - y(d.y); })
.attr("height", function(d) { return y(d.y); });
svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", height)
.attr("y2", height);
</script>
Full example histogram gist is:
https://gist.github.com/993912

There's another way to do this that doesn't require redrawing the graph, and it involves modifying the viewBox and preserveAspectRatio attributes on the <svg> element:
<svg id="chart" viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>
Update 11/24/15: most modern browsers can infer the aspect ratio of SVG elements from the viewBox, so you may not need to keep the chart's size up to date. If you need to support older browsers, you can resize your element when the window resizes like so:
var aspect = width / height,
chart = d3.select('#chart');
d3.select(window)
.on("resize", function() {
var targetWidth = chart.node().getBoundingClientRect().width;
chart.attr("width", targetWidth);
chart.attr("height", targetWidth / aspect);
});
And the svg contents will be scaled automatically. You can see a working example of this (with some modifications) here: just resize the window or the bottom right pane to see how it reacts.

Look for 'responsive SVG' it is pretty simple to make a SVG responsive and you don't have to worry about sizes any more.
Here is how I did it:
d3.select("div#chartId")
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
//class to make it responsive
.classed("svg-content-responsive", true);
The CSS code:
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
More info / tutorials:
http://demosthenes.info/blog/744/Make-SVG-Responsive
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

I've coded up a small gist to solve this.
The general solution pattern is this:
Breakout the script into computation and drawing functions.
Ensure the drawing function draws dynamically and is driven of
visualisation width and height variables (The best way to do this is
to use the d3.scale api)
Bind/chain the drawing to a reference
element in the markup. (I used jquery for this, so imported it).
Remember to remove it if it's already drawn. Get the dimensions from
the referenced element using jquery.
Bind/chain the draw function to
the window resize function. Introduce a debounce (timeout) to this
chain to ensure we only redraw after a timeout.
I also added the minified d3.js script for speed.
The gist is here: https://gist.github.com/2414111
jquery reference back code:
$(reference).empty()
var width = $(reference).width();
Debounce code:
var debounce = function(fn, timeout)
{
var timeoutID = -1;
return function() {
if (timeoutID > -1) {
window.clearTimeout(timeoutID);
}
timeoutID = window.setTimeout(fn, timeout);
}
};
var debounced_draw = debounce(function() {
draw_histogram(div_name, pos_data, neg_data);
}, 125);
$(window).resize(debounced_draw);
Enjoy!

Without Using ViewBox
Here is an example of a solution that does not rely on using a viewBox:
The key is in updating the range of the scales which are used to place data.
First, calculate your original aspect ratio:
var ratio = width / height;
Then, on each resize, update the range of x and y:
function resize() {
x.rangeRoundBands([0, window.innerWidth]);
y.range([0, window.innerWidth / ratio]);
svg.attr("height", window.innerHeight);
}
Note that the height is based on the width and the aspect ratio, so that your original proportions are maintained.
Finally, "redraw" the chart – update any attribute that depends on either of the x or y scales:
function redraw() {
rects.attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y.range()[1] - y(d.y); })
.attr("height", function(d) { return y(d.y); });
}
Note that in re-sizing the rects you can use the upper-bound of the range of y, rather than explicitly using the height:
.attr("y", function(d) { return y.range()[1] - y(d.y); })
var n = 10000, // number of trials
m = 10, // number of random variables
data = [];
// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
for (var s = 0, j = 0; j < m; j++) {
s += Math.random();
}
data.push(s);
}
var histogram = d3.layout.histogram()
(data);
var width = 960,
height = 500;
var ratio = width / height;
var x = d3.scale.ordinal()
.domain(histogram.map(function(d) {
return d.x;
}))
var y = d3.scale.linear()
.domain([0, d3.max(histogram, function(d) {
return d.y;
})])
var svg = d3.select("body").append("svg")
.attr("width", "100%")
.attr("height", height);
var rects = svg.selectAll("rect").data(histogram);
rects.enter().append("rect");
function redraw() {
rects.attr("width", x.rangeBand())
.attr("x", function(d) {
return x(d.x);
})
// .attr("y", function(d) { return height - y(d.y); })
.attr("y", function(d) {
return y.range()[1] - y(d.y);
})
.attr("height", function(d) {
return y(d.y);
});
}
function resize() {
x.rangeRoundBands([0, window.innerWidth]);
y.range([0, window.innerWidth / ratio]);
svg.attr("height", window.innerHeight);
}
d3.select(window).on('resize', function() {
resize();
redraw();
})
resize();
redraw();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Lots of complex answers here.
Basically all you need to do is ditch the width and height attributes in favor of the viewBox attribute:
width = 500;
height = 500;
const svg = d3
.select("#chart")
.append("svg")
.attr("viewBox", `0 0 ${width} ${height}`)
If you have margins, you can just add them there into the width/height then just append the g thereafter and transform it like you would normally.

If you are using d3.js through c3.js the solution to the responsiveness issue is quite straightforward :
var chart = c3.generate({bindTo:"#chart",...});
chart.resize($("#chart").width(),$("#chart").height());
where the generated HTML looks like :
<div id="chart">
<svg>...</svg>
</div>

In the case that you are using a d3 wrapper like plottable.js, be aware that the easiest solution might be adding an event listener and then calling a redraw function (redraw in plottable.js). In the case of plottable.js this will work excellently (this approach is poorly documented):
window.addEventListener("resize", function() {
table.redraw();
});

Shawn Allen's answer was great. But you may not want to do this every single time. If you host it on vida.io, you get automatic responsive for your svg visualization.
You can get responsive iframe with this simple embed code:
<div id="vida-embed">
<iframe src="http://embed.vida.io/documents/9Pst6wmB83BgRZXgx" width="auto" height="525" seamless frameBorder="0" scrolling="no"></iframe>
</div>
#vida-embed iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
http://jsfiddle.net/dnprock/npxp3v9d/1/
Disclosure: I build this feature at vida.io.

In case people are still visiting this question - here’s what worked for me:
Enclose the iframe in a div and use css to add a padding of, say, 40% to that div (the percentage depending on the aspect ratio you want). Then set both width and height of the iframe itself to 100%.
In the html doc containing the chart to be loaded in the iframe, set width to the width of the div that the svg is appended to (or to the width of the body) and set height to width * aspect ratio.
Write a function that reloads the iframe content upon window resize, so as to adapt the size of the chart when people rotate their phone.
Example here on my website:
http://dirkmjk.nl/en/2016/05/embedding-d3js-charts-responsive-website
UPDATE 30 Dec 2016
The approach I described above has some drawbacks, especially that it doesn’t take the height into account of any title and captions that are not part of the D3-created svg. I’ve since come across what I think is a better approach:
Set the width of the D3 chart to the width of the div it’s attached to and use the aspect ratio to set its height accordingly;
Have the embedded page send its height and url to the parent page using HTML5’s postMessage;
On the parent page, use the url to identify the corresponding iframe (useful if you have more than one iframe on your page) and update its height to the height of the embedded page.
Example here on my website: http://dirkmjk.nl/en/2016/12/embedding-d3js-charts-responsive-website-better-solution

One of the basic principles of the D3 data-join is that it is idempotent. In other words, if you repeatedly evaluate a data-join with the same data, the rendered output is the same. Therefore, as long as you render your chart correctly, taking care withe your enter, update and exit selections - all you have to do when the size changes, is re-render the chart in its entirety.
There are a couple of other things you should do, one is de-bounce the window resize handler in order to throttle it. Also, rather than hard-coding widths / heights, this should be achieved by measuring the containing element.
As an alternative, here is your chart rendered using d3fc, which is a set of D3 components that correctly handle data-joins. It also has a cartesian chart that measures it containing element making it easy to create 'responsive' charts:
// create some test data
var data = d3.range(50).map(function(d) {
return {
x: d / 4,
y: Math.sin(d / 4),
z: Math.cos(d / 4) * 0.7
};
});
var yExtent = fc.extentLinear()
.accessors([
function(d) { return d.y; },
function(d) { return d.z; }
])
.pad([0.4, 0.4])
.padUnit('domain');
var xExtent = fc.extentLinear()
.accessors([function(d) { return d.x; }]);
// create a chart
var chart = fc.chartSvgCartesian(
d3.scaleLinear(),
d3.scaleLinear())
.yDomain(yExtent(data))
.yLabel('Sine / Cosine')
.yOrient('left')
.xDomain(xExtent(data))
.xLabel('Value')
.chartLabel('Sine/Cosine Line/Area Chart');
// create a pair of series and some gridlines
var sinLine = fc.seriesSvgLine()
.crossValue(function(d) { return d.x; })
.mainValue(function(d) { return d.y; })
.decorate(function(selection) {
selection.enter()
.style('stroke', 'purple');
});
var cosLine = fc.seriesSvgArea()
.crossValue(function(d) { return d.x; })
.mainValue(function(d) { return d.z; })
.decorate(function(selection) {
selection.enter()
.style('fill', 'lightgreen')
.style('fill-opacity', 0.5);
});
var gridlines = fc.annotationSvgGridline();
// combine using a multi-series
var multi = fc.seriesSvgMulti()
.series([gridlines, sinLine, cosLine]);
chart.plotArea(multi);
// render
d3.select('#simple-chart')
.datum(data)
.call(chart);
You can see it in action in this codepen:
https://codepen.io/ColinEberhardt/pen/dOBvOy
where you can resize the window and verify that the chart is correctly re-rendered.
Please note, as a full disclosure, I am one of the maintainers of d3fc.

I would avoid resize/tick solutions like the plague since they are inefficient and can cause issues in your app (e.g. a tooltip re-calculates the position it should appear on window resize, then a moment later your chart resizes too and the page re-layouts and now your tooltip is wrong again).
You can simulate this behaviour in some older browsers that don't properly support it like IE11 too using a <canvas> element which maintains it's aspect.
Given 960x540 which is an aspect of 16:9:
<div style="position: relative">
<canvas width="16" height="9" style="width: 100%"></canvas>
<svg viewBox="0 0 960 540" preserveAspectRatio="xMidYMid meet" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-tap-highlight-color: transparent;">
</svg>
</div>

You can also use bootstrap 3 to adapt the size of a visualization. For example, we can set up the HTML code as:
<div class="container>
<div class="row">
<div class='col-sm-6 col-md-4' id="month-view" style="height:345px;">
<div id ="responsivetext">Something to write</div>
</div>
</div>
</div>
I have set up a fixed height because of my needs, but you can leave the size auto as well. The "col-sm-6 col-md-4" makes the div responsive for different devices. You can learn more at http://getbootstrap.com/css/#grid-example-basic
We can access the graph with the help of the id month-view.
I won't go into much detail about the d3 code, I will only input the part that is needed for adapting to different screen sizes.
var width = document.getElementById('month-view').offsetWidth;
var height = document.getElementById('month-view').offsetHeight - document.getElementById('responsivetext2').offsetHeight;
The width is set by getting the width of the div with the id month-view.
The height in my case should not include the entire area. I also have some text above the bar so I need to calculate that area as well. That's why I identified the area of the text with the id responsivetext. For calculating the allowed height of the bar, I subtracted the height of the text from the height of the div.
This allows you to have a bar that will adopt all the different screen/div sizes. It might not be the best way of doing it, but it surely works for the needs of my project.

Cannot have multiple charts in one HTML page - d3

I need to have two same group bar charts, one below another.
I just copied the code and defined two divs and two SVGs
I want to have this chart twice.
But I have this as a result.
Can someone tell me what is my problem?
HTML:
<div class="svg-div">
<svg id="svg1" width="1000" height="500"></svg>
<svg id="svg2" width="1000" height="500"></svg>
<script src = "barchart.js"> </script>
</div>
Javascript:
//SVG for the second chart
var svg2 = d3.select('#chart1').append("svg2").attr('width', 800).attr('height', 550),
margin = {top: 20, right: 20, bottom: 20, left: 40},
width = +svg2.attr("width") - margin.left - margin.right,
height = +svg2.attr("height") - margin.top - margin.bottom,
g = svg2.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

You have tons of duplicated variables here! That simply won't work.
The correct way to fix this is renaming all the variables (if the charts are substantially different) or creating a function that you call multiple times (if the charts are the same and only the data changes, for instance).
Meanwhile, here is a quick and lazy solution: I wrapped your two codes inside IIFEs:
(function chart1(){
//code here for chart1
}())
(function chart2(){
//code here for chart2
}())
Here is the plunker: https://plnkr.co/edit/IoTUkqrGWmunrSW9x9ls?p=preview
Again, this is not the correct way to fix this, I'm doing this only for you to see that variables are scoped. I suggest that you change the variables or, even better, if the code is the same for both charts, simply put all of it inside a function that you call twice (with the same arguments or with different arguments, that's up to you). Like this:
function draw(selector){
var svg = d3.select(selector).append("svg")
//etc...
}
draw("#chart1");
draw("#chart2");
Here is the corresponding plunker: https://plnkr.co/edit/7bZhmmMV1CjUgx7v59wY?p=preview

var svg2 = d3.select('#chart1').append("svg").attr('width', 800).attr('height', 550),
margin = {top: 20, right: 20, bottom: 20, left: 40},
width = +svg2.attr("width") - margin.left - margin.right,
height = +svg2.attr("height") - margin.top - margin.bottom,
g = svg2.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
I made a small change that should make it work. .append() needs a valid element so just append an svg.

D3 & Angular: What's the best way to resize multiple plots on window resize?

I have a reports page containing three D3 JS v3 plots and some tabular data. The page looks great while the window is maximized but when the user resizes the browser windows it starts to behave oddly i.e. each plot overflows the containing div etc.
After a bit of research I found that I just need to set the viewBox attribute of the root svg for each plot i.e.
var margin = {top: 40, right: 20, bottom: 20, left: 20},
width = 450 - margin.left - margin.right,
height = 370 - margin.top - margin.bottom;
var chartSvg = d3.select("#myPlotDivId")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
.attr("preserveAspectRatio", "xMidYMid meet")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
This I can do within the specific AngularJS controller and is no problem. However, I also need to update all three plot svgs each time the window is resized. There is a nice JSFiddle demonstrating this:
var aspect = chartSvg.width() / chartSvg.height(),
container = chartSvg.parent();
$(window).on("resize", function() {
var targetWidth = container.width();
chartSvg.attr("width", targetWidth);
chartSvg.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
However, I'd prefer to do this within the controller and the function from where I create the plots ... How can I do this? I would not like to have a Window event hook out in the page calling my controllers or creating a global directive just for this. Any ideas?

First of all, I hope you have some angular component/directive wrapping d3 code, if not - this is something you should do.
Then this component should accept width and height:
app.component('myd3Plot', ...
width: '<',
height: '<'
And in parent controller/component you have listener for window resize and adjust child plots sizes:
window.on('resize', function() {
vm.child1.height = ...
vm.child2.height = ...
})
<myd3-plot height="$ctrl.child1.height"...
<myd3-plot height="$ctrl.child2.height"...

Finally I did it as follows i.e. injecting the window component into my controller and defining an onresize event handler:
class ReportCtrl {
// 1) inject the window into my controller
constructor(private $window: IWindowService, ...) {
// etc ...
// 2) reusable function to resize a d3 js plot
var resizePlot = function (divId: string) {
var container = d3.select(divId);
var svg = container.select("svg");
var aspect = svg.attr("width") / svg.attr("height");
var targetWidth = container.node().getBoundingClientRect().width;
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
};
// 3) hook on the window onresize event
$window.onresize = function (ev: UIEvent) {
resizePlot("#hist");
resizePlot("#scatter1");
resizePlot("#scatter2");
};
}
}

d3js svg viewBox will not allows calculations of window.innerWidth - 170

I know my error is in re-sizing .attr("width", x) or not calculating width in .attr("viewBox", "0 0 " + x + " " + y ).
How do I fix my code or is there other working solutions?
Working Code:(initial pageload)
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth - 170 || e.clientWidth - 170 || g.clientWidth - 170;
y = w.innerHeight || e.clientHeight|| g.clientHeight;
var svg = d3.select("body").append("svg")
.attr("width", x)
.attr("height", y)
.attr("class", "bubble")
Results are window.innerWidth -170
When changed to viewBox calculation is unresponsive.
Non-responsive Code:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth - 170 || e.clientWidth - 170 || g.clientWidth - 170;
y = w.innerHeight || e.clientHeight|| g.clientHeight;
var svg = d3.select("body").append("svg")
.attr("viewBox", "0 0 " + x + " " + y )
.attr("preserveAspectRatio", "xMidYMid meet")
.attr("class", "bubble")
Results are window.innerWidth
How can I get viewBox to allow calculations/subtraction of 170px?
Is there a working alternative to resizing svg? I have attempted other methods without success; left that code at the bottom.
ANSWER
It was <div id="dots"></div> to a simple:
<svg id="dots" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
I may have to update the link but it now makes the veiwBox do as expected. I have not changed any code I was not confused as to how it was suppose to work. The properties needed to control svg apparently were not fully built into D3.js unlike what I was led to believe.

You are confusing what setting width/height and setting the viewBox property mean on an svg element.
The height and width control the dimension of the svg element inside the layout of the DOM while the viewBox sets the coordinate system inside the svg element.
Here, the size of the SVG element is (300px, 500px) but the coordinate system internally starts from (-100, -100) and has a width and height of 200 and 200 each.
As for making the graph responsive, take a look at how nvd3 handles window resizes and how to maintain the coordinate system inside the SVG element upon resize using viewBox and preserveAspectRatio.

In your
JSFIDDLE
Change <div id="dots"></div> to a simple:
<svg id="dots" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
It works in notepad++ when I find a better way to call site I will post.

Resize svg when window is resized in d3.js

I'm drawing a scatterplot with d3.js. With the help of this question :
Get the size of the screen, current web page and browser window
I'm using this answer :
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
So I'm able to fit my plot to the user's window like this :
var svg = d3.select("body").append("svg")
.attr("width", x)
.attr("height", y)
.append("g");
Now I'd like that something takes care of resizing the plot when the user resize the window.
PS : I'm not using jQuery in my code.

Look for 'responsive SVG' it is pretty simple to make a SVG responsive and you don't have to worry about sizes any more.
Here is how I did it:
d3.select("div#chartId")
.append("div")
// Container class to make it responsive.
.classed("svg-container", true)
.append("svg")
// Responsive SVG needs these 2 attributes and no width and height attr.
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
// Class to make it responsive.
.classed("svg-content-responsive", true)
// Fill with a rectangle for visualization.
.append("rect")
.classed("rect", true)
.attr("width", 600)
.attr("height", 400);
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
svg .rect {
fill: gold;
stroke: steelblue;
stroke-width: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chartId"></div>
Note: Everything in the SVG image will scale with the window width. This includes stroke width and font sizes (even those set with CSS). If this is not desired, there are more involved alternate solutions below.
More info / tutorials:
http://thenewcode.com/744/Make-SVG-Responsive
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

Use window.onresize:
function updateWindow(){
x = w.innerWidth || e.clientWidth || g.clientWidth;
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
svg.attr("width", x).attr("height", y);
}
d3.select(window).on('resize.updatesvg', updateWindow);
http://jsfiddle.net/Zb85u/1/

UPDATE just use the new way from #cminatti
old answer for historic purposes
IMO it's better to use select() and on() since that way you can have multiple resize event handlers... just don't get too crazy
d3.select(window).on('resize', resize);
function resize() {
// update width
width = parseInt(d3.select('#chart').style('width'), 10);
width = width - margin.left - margin.right;
// resize the chart
x.range([0, width]);
d3.select(chart.node().parentNode)
.style('height', (y.rangeExtent()[1] + margin.top + margin.bottom) + 'px')
.style('width', (width + margin.left + margin.right) + 'px');
chart.selectAll('rect.background')
.attr('width', width);
chart.selectAll('rect.percent')
.attr('width', function(d) { return x(d.percent); });
// update median ticks
var median = d3.median(chart.selectAll('.bar').data(),
function(d) { return d.percent; });
chart.selectAll('line.median')
.attr('x1', x(median))
.attr('x2', x(median));
// update axes
chart.select('.x.axis.top').call(xAxis.orient('top'));
chart.select('.x.axis.bottom').call(xAxis.orient('bottom'));
}
http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/

It's kind of ugly if the resizing code is almost as long as the code for building the graph in first place. So instead of resizing every element of the existing chart, why not simply reloading it? Here is how it worked for me:
function data_display(data){
e = document.getElementById('data-div');
var w = e.clientWidth;
// remove old svg if any -- otherwise resizing adds a second one
d3.select('svg').remove();
// create canvas
var svg = d3.select('#data-div').append('svg')
.attr('height', 100)
.attr('width', w);
// now add lots of beautiful elements to your graph
// ...
}
data_display(my_data); // call on page load
window.addEventListener('resize', function(event){
data_display(my_data); // just call it again...
}
The crucial line is d3.select('svg').remove();. Otherwise each resizing will add another SVG element below the previous one.

In force layouts simply setting the 'height' and 'width' attributes will not work to re-center/move the plot into the svg container. However, there's a very simple answer that works for Force Layouts found here. In summary:
Use same (any) eventing you like.
window.on('resize', resize);
Then assuming you have svg & force variables:
var svg = /* D3 Code */;
var force = /* D3 Code */;
function resize(e){
// get width/height with container selector (body also works)
// or use other method of calculating desired values
var width = $('#myselector').width();
var height = $('#myselector').height();
// set attrs and 'resume' force
svg.attr('width', width);
svg.attr('height', height);
force.size([width, height]).resume();
}
In this way, you don't re-render the graph entirely, we set the attributes and d3 re-calculates things as necessary. This at least works when you use a point of gravity. I'm not sure if that's a prerequisite for this solution. Can anyone confirm or deny ?
Cheers, g

If you want to bind custom logic to resize event, nowadays you may start using ResizeObserver browser API for the bounding box of an SVGElement.
This will also handle the case when container is resized because of the nearby elements size change.
There is a polyfill for broader browser support.
This is how it may work in UI component:
function redrawGraph(container, { width, height }) {
d3
.select(container)
.select('svg')
.attr('height', height)
.attr('width', width)
.select('rect')
.attr('height', height)
.attr('width', width);
}
// Setup observer in constructor
const resizeObserver = new ResizeObserver((entries, observer) => {
for (const entry of entries) {
// on resize logic specific to this component
redrawGraph(entry.target, entry.contentRect);
}
})
// Observe the container
const container = document.querySelector('.graph-container');
resizeObserver.observe(container)
.graph-container {
height: 75vh;
width: 75vw;
}
.graph-container svg rect {
fill: gold;
stroke: steelblue;
stroke-width: 3px;
}
<script src="https://unpkg.com/resize-observer-polyfill#1.5.1/dist/ResizeObserver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<figure class="graph-container">
<svg width="100" height="100">
<rect x="0" y="0" width="100" height="100" />
</svg>
</figure>
// unobserve in component destroy method
this.resizeObserver.disconnect()

For those using force directed graphs in D3 v4/v5, the size method doesn't exist any more. Something like the following worked for me (based on this github issue):
simulation
.force("center", d3.forceCenter(width / 2, height / 2))
.force("x", d3.forceX(width / 2))
.force("y", d3.forceY(height / 2))
.alpha(0.1).restart();