Данные внутри функции не обновляются в D3.js

#javascript #d3.js

Вопрос:

У меня есть гистограмма и три кнопки для предоставления различных данных на эту диаграмму.

введите описание изображения здесь

У меня есть функция, которая называется draw(data, chartType) . Я предоставил разные данные и тип диаграммы, когда нажал на 3 разные кнопки. Я хочу показать общее значение стека в разделе «Общий баланс». Вы можете видеть, что он работает для исходных данных (данные за месяц).

Что я делаю, так это,

 function draw(data, chartType) {
    // some code here
    // ....
    // ....
    rect.enter().append("rect")
        .attr("x", function(d) {
            return x(d.x);
        })
        .attr("y", function(d) {
            return y(d.y   d.y0);
        })
        .attr("height", function(d) {
            return y(d.y0) - y(d.y   d.y0);
        })
        .attr("width", x.rangeBand())
        .on('mouseenter', function(actual, i) {

            const limitY = y(actual.y   actual.y0);
            line = svg.append('line')
                .attr('id', 'limit')
                .attr('x1', 0)
                .attr('y1', limitY)
                .attr('x2', width)
                .attr('y2', limitY);



            d3.select(".header-sp-endbalance-change").text(actual.y);
            d3.select(".header-sp-endbalance-amount").data(chartType).data(data).text(function(d) {
                console.log(chartType);
                console.log(data);
                var val2 = sumOfStack(chartType, data, actual.x, xData);
                return kFormatter(val2);
            });

            svg.append("text")
                .attr("id", "rectangleText")
                .attr("class", "visible")
                .attr("font-weight", "bold")
                .attr("x", x(actual.x)   5)
                //.attr("y", limitY   10)
                .attr("y", -20)
                .attr("dy", ".35em")
                .text('

для приведенной ниже части

 d3.select(".header-sp-endbalance-amount").data(chartType).data(data).text(function(d) {
    console.log(chartType);
    console.log(data);
    var val2 = sumOfStack(chartType, data, actual.x, xData);
    return kFormatter(val2);
});
 

Я вижу, что chartType и data то и другое не обновляются, когда я нажимаю на кнопки, т. е. вызываю draw(data, chartType) с разными параметрами.

Вы можете найти полный код здесь.


actual.y.toLocaleString('en-US', {
maximumFractionDigits: 2
}));

d3.select(this)
.transition()
.duration(200)
.style("opacity", 0.35);
})

.on("mouseout", function() {
tooltip.style("display", "none");
d3.select(this)
.transition()
.duration(200)
.style("opacity", 1);

svg.selectAll('#limit').remove();
svg.selectAll('#myId').remove();
svg.selectAll('#rectangleText').remove();

});
// some code here
// ....
// ....
}
для приведенной ниже части


Я вижу, что chartType и data то и другое не обновляются, когда я нажимаю на кнопки, т. е. вызываю draw(data, chartType) с разными параметрами.

Вы можете найти полный код здесь.