d3.js Обновление временной области на основе выбора кисти

Я пытаюсь обновить временную область (ось x) линейной диаграммы на основе координат «кисти» на вторичном графике.

код скрипки здесь - https://jsfiddle.net/6xpcxvwj/7/

var brush = d3.brushX()
        .extent([[0, 0], [navWidth, navHeight]])
        .on("end", function () {

            xScale.domain(brush.extent());
            console.log("domain modified");

            svg.select("._x_axis").call(xAxis);
            console.log("x axis modified");

            svg.select("._line").attr("d", line);
            console.log("line modified");
        });

Поскольку в приведенном выше коде (который находится в конце страницы скрипки) есть что-то неправильное, которое при обновлении (перемещении кисти) основного графика удаляет ось x и линейный график.

Код основан на https://bl.ocks.org/mbostock/1667367, но с большая разница в том, что мой набор данных представляет собой массив, тогда как в примере это файл csv.


javascript d3.js linechart
person kramasundar    schedule 19.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В d3 версии 4 d3.extent больше не работает так же (вы не можете использовать его чтобы получить зачищенный экстент). Вместо этого эта функциональность была абстрагирована в d3.event.selection. Так что попробуйте:

var s = d3.event.selection;
xScale.domain([navXScale.invert(s[0]), navXScale.invert(s[1])]);

После исправления этого вам также нужно будет ввести clip-path в свой сюжет.

Обновлена ​​скрипка.

person Mark    schedule 19.08.2016