NVD3 штабели Площадь Диаграмма

Question

Примера Stacked области диаграммы http://nvd3.org/ghpages/stackedArea.html

Когда я нажимаю на серии, она расширяется на всю область диаграммы, удаление других серий. Как отключить эту функцию?

Answer 1

Существует не вариант NVD3 график, чтобы более-поездки такого поведения, но вы можете чрезмерно ездить обработчик события щелчка непосредственно. Тем не менее, он немного усложняется с диаграммой сложенной области ...

NVD3 использует объект d3.dispatch для обработки пользовательских событий. Пользовательские клики и мыши и связанные с ними действия преобразуются в эти настраиваемые события.

Если вы хотите, чтобы функция выполнялась после пользовательского события, вы можете вызвать метод .on(eventName, function) объекта отправки. Если параметр функции равен null, он отменяет любые предыдущие функции обработки событий, прикрепленные к этому имени. (Если вы хотите, чтобы несколько функций запускались одним и тем же событием, вы можете добавить «имя пространства имен» к имени события, используя в качестве первого параметра строку формы "eventName.namespace", и эта функция будет отменена только тогда, когда вызывается on с той же строкой имени события.)

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

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

И вот где оно действительно сложно. Когда диаграмма в целом обновляется или изменяется ее макет, эти внутренние функции рисования диаграмм для области построения графика и диаграммы рассеяния переписываются основной функцией диаграммы. Это означает, что все события будут сброшены до значений по умолчанию для NVD3.

Таким образом, вы должны отключить не только все события, вызывающие поведение, но и изменить функцию обновления, чтобы снова отключить их. И поскольку функция обновления сама сбрасывает каждое обновление, * вам нужно включить модификацию функции обновления как часть функции, которую вы используете для отключения событий.

** Функция обновления просто перезаписывает всю функцию рисования диаграммы, используя тот же контейнер. Одна из первых строк функции диаграммы создает функцию обновления.*

Вот код, основанный на примере штабелях района на nvd3.org live code page:

nv.addGraph(function() { 

    /* Set up chart as normal */ 
    var chart = nv.models.stackedAreaChart() 
       .x(function(d) { return d[0] }) 
       .y(function(d) { return d[1] }) 
       .clipEdge(true) 
       //.useInteractiveGuideline(true) 
     ; 

    chart.xAxis 
     .showMaxMin(false) 
     .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) }); 

    chart.yAxis 
     .tickFormat(d3.format(',.2f')); 

    d3.select('#chart svg') 
    .datum(data) 
     .transition().duration(500).call(chart); 

    /* create a function to disable events and modify the update function */ 
    function disableAreaClick() { 

    //I'm probably over-killing with the amount of events I'm cancelling out 
    //but it doesn't seem to have any side effects: 
    chart.stacked.dispatch.on("areaClick", null); 
    chart.stacked.dispatch.on("areaClick.toggle", null); 

    chart.stacked.scatter.dispatch.on("elementClick", null); 
    chart.stacked.scatter.dispatch.on("elementClick.area", null); 

    chart.legend.dispatch.on("legendClick", null); 
    chart.legend.dispatch.on("legendDblclick", null); 
    chart.legend.dispatch.on("stateChange", null); 

    if (chart.update) { 
     //if the chart currently has an update function 
     //(created when the chart is called on a container selection) 
     //then modify it to re-call this function after update 

     var originalUpdate = chart.update; 
      //assign the update function to a new name 

     chart.update = function(){ 
      originalUpdate(); 
      disableAreaClick(); 
     } 
    } 
    } 

    //Call your function, disabling events on current chart and future updates: 
    disableAreaClick(); 
    //this must be called *after* calling the chart on a selection 
    //so that it has an update function to modify 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

Answer 2

Лучшее, что вы можете сделать сейчас, - отключить легенду. Вы можете сделать это с помощью chart.showLegend(false), или, как вариант, как:

var options = { 
    showLegend: false 
}; 

Answer 3

Противный решение, если вы не возражаете, не реагирует на любое событие мыши:

pointer-events: none; 

использования это на элементе.