Изменение размера более одного графика SVG на одной веб-странице

Я написал функции с использованием d3.js для создания графиков SVG. Размер графиков изменяется при изменении размера окна. (Упрощенный) шаблон программного обеспечения выглядит следующим образом:

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();
}

Отличный пример этого шаблона можно увидеть здесь: https://blog.safaribooksonline.com/2014/02/17/building-responsible-visualizations-d3-js/

Это моя проблема: я дважды вызываю процедуру и создаю два графика SVG на одной и той же веб-странице. Когда размер окна изменяется, ТОЛЬКО последний нарисованный SVG изменяется. Как я могу сохранить первый «живым», чтобы он прослушивал событие изменения размера?


javascript svg d3.js resize
person Freyr    schedule 09.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

См. документацию здесь:

Если прослушиватель событий уже был зарегистрирован для того же типа в выбранном элементе, существующий прослушиватель удаляется перед добавлением нового прослушивателя. Чтобы зарегистрировать несколько слушателей для одного и того же типа события, за типом может следовать необязательное пространство имен, например «click.foo» и «click.bar». Чтобы удалить прослушиватель, передайте null в качестве слушателя. Чтобы удалить всех слушателей для определенного типа события, передайте null в качестве слушателя и .type в качестве типа, например. selection.on(".foo", ноль).

Итак, если предположить, что DIV является строковым идентификатором:

d3.select(window).on('resize.'+DIV, resize);
person Mark    schedule 09.02.2015
comment
Спасибо за быстрый ответ, Марк. Я сам нашел (простое) решение. Когда я использую window.addEventListener("resize", resize) вместо d3.select(window).on('resize', resize), оба графика правильно масштабируются. - person Freyr; 09.02.2015