#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)
с разными параметрами.
Вы можете найти полный код здесь.