D3JS кисть, как получить значения для выбора - PullRequest
Новая
       33

D3JS кисть, как получить значения для выбора

0 голосов
/ 16 марта 2019

У меня есть диаграмма с накоплением даты в d3js v4, и я хочу добавить функцию для выбора кисти.

Я не могу получить значения x из d3.event.selection. Это показывает TypeError: x.invert is not a function ошибка. Зачем? Я использую код кисти из примера . Я скучаю по какой-нибудь специальной библиотеке?

Вот часть моего кода. Нижняя часть самая важная: D: 

 var x = d3.scaleBand().range([0, width]).padding(0.1);
        var y = d3.scaleLinear().range([height, 0]);
        var z = d3.scaleOrdinal().range(['#d53e4f', '#fc8d59', '#fee08b', '#ffffbf', '#e6f598', '#99d594', '#3288bd']);

        x.domain(data.map(function (d) {
            return parseDate(d.time);
        }));

        y.domain([0, d3.max(data, function (d) {
            return d.sum;
        })]);
        z.domain(data.map(function (d) {
            return d.keys;
        }));


   var stack = d3.stack()
            .keys(keys)
            .order(d3.stackOrderNone)
            .offset(d3.stackOffsetNone);

        var layers = stack(data);

        var layer = g.selectAll(".layer")
            .data(layers)
            .enter().append("g")
            .attr("class", "layer");

         layer.selectAll("rect")
            .data(function (d) {
                return d;
            })
            .enter().append("rect")
            .attr('class', 'barStacked')
            .attr("x", function (d) {
                return x(parseDate(d.data.time));
            })
            .attr("y", function (d) {
                return y(d[1]);
            })
            .attr("height", function (d) {
                return y(d[0]) - y(d[1]);
            })
            .attr("width", x.bandwidth());

     g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + (height + 5) + ")")
            .call(xAxis);

        g.append("g")
            .attr("class", "axis axis--y")
            .attr("transform", "translate(0,0)")
            .call(yAxis);


       g.append("g")
            .attr("class", "brush")
            .call(d3.brushX()
                .extent([[0, 0], [width, height]])
                .on("end", brushended));

        function brushended() {
          if (!d3.event.sourceEvent) return; // Only transition after input.
          if (!d3.event.selection) return; // Ignore empty selections.
            var extent = d3.event.selection;
             console.log(x.domain([ x.invert(extent[0]), x.invert(extent[1]) 
    ]));

        }
    }

1 Ответ

0 голосов
/ 16 марта 2019

Как сказал Эндрю, scaleBand не имеет метода инвертирования. Пример в ссылке - непрерывная (временная) шкала, которая имеет метод инвертирования ( здесь ).

Если ваша scaleBand фактически представляет непрерывную шкалу времени, одним из решений будет создание дополнительной шкалы (scaleTime), которая будет иметь тот же диапазон, что и ваша шкала «x», а затем использовать метод инвертирования этого. При указании домена вы должны быть осторожны, чтобы учитывать пропускную способность и заполнение, чтобы сделать его эквивалентным 'x'.

...