Resizing more than one svg graph on the same web page

Question

I have written functions using d3.js to create SVG graphs.The graphs get resized when the window is resized. The (simplified) software pattern is like this:

function drawGraph(DIV, data){
// Draw the initial graph, which fills the supplied DIV

    function resize {
    // Read the new width and height of the SVG, redraw the graph
    }

    d3.select(window).on('resize', resize);
    resize();
}

An excellent example of this pattern can for example be seen here: https://blog.safaribooksonline.com/2014/02/17/building-responsible-visualizations-d3-js/

This is my problem: I call the routine twice and create two SVG graphs on the same web page. When the window is resized, ONLY the last SVG drawn gets resized. How can I keep the first one "alive", so it will listen to the resize event?

Answer 1

See the documentation here :

If an event listener was already registered for the same type on the selected element, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as "click.foo" and "click.bar". To remove a listener, pass null as the listener. To remove all listeners for a particular event type, pass null as the listener, and .type as the type, eg selection.on(".foo", null).

So assuming DIV is a string identifier:

d3.select(window).on('resize.'+DIV, resize);