Question

我有一个堆积条形图。 jsfiddle 是 here。

我添加了一个文本，它实际上是每个条形顶部所有堆栈的总和。

layer.selectAll("rect")
            .data(data)
            .enter().append("text")
            .attr("text-anchor", "middle")
            .attr("x", function (d) { return x(d[chartType]) + x.rangeBand() / 2; })
            .attr("y", function(d)
            {
                return y(sumOfStack(chartType, data, d[chartType], xData)) - 5;
            })
            .text(function(d)
            {
                return sumOfStack(chartType, data, d[chartType], xData);
            })
            .style("fill", "4682b4");

而 sumOfStack() 方法实际上返回的是 y 的值。它总结了所有堆栈值。

function sumOfStack(dataType, data, xValue, sources)
{
    var sum = 0;
  for(var i=0; i<data.length;i++){
    
    if(data[i][dataType] != xValue) continue;

      for(var j=0; j<sources.length; j++)
      {
        sum+= data[i][sources[j]];
      }

    console.log(sum);
    return sum;
  }
}

这里发生的事情是，

那么这里发生了什么，第一次绘制了月度图表并且顶部的值是正确的。但是，当我点击季度/年度时，这些值不会重新计算。

这里有什么问题？

Answer 1

您只使用了选择的 append 部分，它负责处理新元素，而您需要更新的文本已经存在，因此它们不属于 enter() 部分，而是属于现有选择。

用此代码替换总数，它应该可以工作：

   var totals = svg.selectAll('text.totalLabels')
              .data(data);
            
            totals
            .transition()
            .duration(500)
            .attr("x", function (d) { return x(d[chartType]) + x.rangeBand() / 2; })
            .attr("y", function(d)
            {
                return y(sumOfStack(chartType, data, d[chartType], xData)) - 5;
            })
            .text(function(d)
            {
                return sumOfStack(chartType, data, d[chartType], xData);
            });
            
  totals.enter().append('text')
            .attr('class', 'totalLabels')
            .attr("text-anchor", "middle")
            .attr("x", function (d) { return x(d[chartType]) + x.rangeBand() / 2; })
            .attr("y", function(d)
            {
                return y(sumOfStack(chartType, data, d[chartType], xData)) - 5;
            })
            .text(function(d)
            {
                return sumOfStack(chartType, data, d[chartType], xData);
            })
            .style("fill", "4682b4");
            
 totals.exit().remove();

顶部每个条形中堆栈的总值

1 个答案: