Как подружить focus одновременно с mouseover/mouseout и onclick в c3.js

Question

Есть donut диаграмма с кастомной легендой через плагин c3js.org. На данный момент фрагменты диаграммы получают фокус через события mouseover/mouseout при наведении на соответствующие пункты легенды и на сам фрагмент диаграммы. Как добавить фокус фрагмента через события клика(или подобного ему), чтобы потом не спадал фокус при отводе мыши(срабатывает mouseout)?

<div class="" id="donutIndex"></div>
    <ul class="listErrors">
        <li data-id='пункт1'>
            пункт1
        </li>
        <li data-id='пункт2'>
            пункт2
        </li>
        <li data-id='пункт3'>
            пункт3
        </li>
    </ul>

js/jq

$(function() {
        let donutIndex = c3.generate({
            bindto: '#donutIndex',
            legend: {
                show: false
            },
            data: {
                columns: [
                    ['пункт1', 2],
                    ['пункт2', 4],
                    ['пункт3', 9],
                ],
                type: 'donut',
                onclick: function(d, element) {
                    donutIndex.focus(d.id);
                }
            },
            donut: {
                padAngle: 0.05,
            },
            size: {
                 width: 320,
                 height: 330
            }
        });

        $(".listErrors > li").on('mouseover', function() {
            donutIndex.focus($(this).attr('data-id'));
        }).on('mouseout', function() {
            donutIndex.revert();
        })
    });

Answer 1

Решил вот так:

$(function() {
    let donutIndex = c3.generate({
        bindto: '#donutIndex',
        legend: {
            show: false
        },
        data: {
            columns: [
                ['пункт1', 2],
                ['пункт2', 4],
                ['пункт3', 9],
            ],
            type: 'donut',
            onmouseout: function (d) {
                    let selectError = donutIndex.selected()
                    if (selectError.length > 0) {
                        donutIndex.focus(selectError[0].id);
                    }
            },
            selection: {
                    enabled: true,
                    grouped: false,
                    multiple: false
            },
        },
        donut: {
            padAngle: 0.05,
        },
        size: {
             width: 320,
             height: 330
        }
    });

    $(".listErrors > li").on('click', function () {
         let selectError = donutIndex.selected()
         if (selectError.length > 0) {
             donutIndex.unselect(selectError[0].id);
             if (selectError[0].id === $(this).attr('data-id')) {
                 return
             }
         }
          donutIndex.select($(this).attr('data-id'));
     })

     $(".listErrors > li ").on('mouseenter', function () {
         donutIndex.focus($(this).attr('data-id'));
     }).on('mouseleave', function () {
         let selectError = donutIndex.selected()
         if (selectError.length > 0) {
             donutIndex.focus(selectError[0].id);
             return
         }
         donutIndex.revert();
     })
});

Возможно это мусор-код но работает

БЛОГ НА HUSL

Как подружить focus одновременно с mouseover/mouseout и onclick в c3.js

Ответы (1 шт):