Как я могу зарегистрировать события в d3?

Question

Я работаю над небольшой графической библиотекой, используя код d3, который я написал. Я добавлял параметры конфигурации/настройки в свои диаграммы для различных случаев использования, и что-то, что я продолжаю работать, это конфликтующие обработчики событий.

Переходы иногда дают мне проблемы, но мой вопрос более общий, чем это. Каков хороший способ выполнить набор обработчиков событий в моих диаграммах?

Один метода я использовал, чтобы создать буквальный массив обработчиков, затем перебрать список, выполнение каждого обработчика:

function chart(selection) { 
    selection.each(function(data) { 

    // initial config and options, including the handlers array 
    var margin = {top: 20, right: 20, bottom: 50, left: 40}, 
     ... 
     fadeOnHover = true, 
     barMouseoutHandlers = [], 
     barMouseoverHandlers = []; 


    // create the chart 


    // an option 
    if (fadeOnHover) { 
     barMousemoveHandlers.push(function(d, i) { 
     selection.selectAll('.bar').filter(function(d, j){return i!=j;}) 
      .transition().duration(100).style('opacity', '.5'); 
     selection.selectAll('.bar').filter(function(d, j){return i==j;}) 
      .transition().duration(100).style('opacity', '1'); 
     }); 

     barMouseoutHandlers.push(function() { 
     selection.selectAll('.bar').transition().duration(100).style('opacity', '1'); 
     }); 
    } 

    // other options, which may add handlers 

    // then at the end of the function, execute all handlers 
    g.selectAll('.bar') 
     .on('mouseover', function(d, i) { 
     barMouseoverHandlers.forEach(function(handler) { handler(d, i); }); 
     }) 
     .on('mouseout', function(d, i) { 
     barMouseoutHandlers.forEach(function(handler) { handler(d, i); }); 
     }); 
    }); 
} 

Это то, что я придумал, когда просто бросал некоторые функции на моих графиках в гуще вещей, но он явно не очень модульный или хорошо организованный. Возможно, есть возможность извлечь часть этих предметов в отдельные объекты.

Какие еще существуют подходы? Я хотел бы услышать ваши мысли об этом.

Answer 1

Я думаю, вам просто нужно «пространство имен» для нескольких событий, чтобы они не перезаписывали ранее зарегистрированные события (ы). Нечто подобное:

g.selectAll('.bar') 
    .on('mouseover.one', function(d, i) { 
    // do something 
    }) 
    .on('mouseover.two', function(d, i) { 
    // something else 
    }); 

От API:

Для того, чтобы зарегистрировать несколько слушателей для того же самого типа события, типа может сопровождаться дополнительным пространством имен, таких как «click.foo» и " click.bar».