过渡两组元素没有工作

Question

我正在尝试创建一个堆叠的条形图。我想在图表中添加一些不错的过渡，但是我会遇到错误。如果我尝试过渡两个矩形，则只有蓝色矩形过渡并出现。

let rects = svg.selectAll("rect").data(heartDiseaseByAge);
      let displayHealth = async () => {
        //healthy rects
        rects
          .enter()
          .append("rect")
          .attr("width", (width - spacing * 2) / xLabelCount - 15)
          .attr("height", (d) => {
            console.log(d.ageRange + " " + d.noDiseaseCountPercent);
            return yScale(d.noDiseaseCountPercent);
          })
          .attr("x", (d, i) => {
            return i * (width / xLabelCount) + spacing;
          })
          .attr("y", (d) => height - yScale(d.noDiseaseCountPercent) - spacing)
          .attr("fill", "#0091DA")
          .on("mouseover", (event, d, i) => {
            onMouseOver(event, d, i);
          })
          .on("mouseout", (e) => {
            onMouseOut(e);
          })
          .on("mousemove", (e) => {
            onMouseMove(e);
          });
      };

      //unhealthy rects
      let displayUnhealthy = async () => {
        rects
          .enter()
          .append("rect")
          .attr("width", (width - spacing * 2) / xLabelCount - 15)
          .attr("height", (d) => {
            return yScale(d.hasDiseaseCountPercent);
          })
          .attr("x", (d, i) => {
            return i * (width / xLabelCount) + spacing;
          })
          .attr("y", (d) => {
            return (
              height -
              yScale(d.hasDiseaseCountPercent) -
              yScale(d.noDiseaseCountPercent) -
              spacing
            );
          })
          .attr("fill", "#E52E2E")
          .on("mouseover", (event, d, i) => {
            onMouseOver(event, d, i);
          })
          .on("mouseout", (e) => {
            onMouseMove(e);
          })
          .on("mousemove", (e) => {
            onMouseMove(e);
          });
      };

      await displayHealth();
      await displayUnhealthy();

当我打电话时：

rects
              .enter()
              .append("rect")
  .transition()
  .duration(2000)
              .attr("width", (width - spacing * 2) / xLabelCount - 15)
              .attr("height", (d) => {
                return yScale(d.hasDiseaseCountPercent);
              })
              .attr("x", (d, i) => {
                return i * (width / xLabelCount) + spacing;
              })
              .attr("y", (d) => {
                return (
                  height -
                  yScale(d.hasDiseaseCountPercent) -
                  yScale(d.noDiseaseCountPercent) -
                  spacing
                );
              })
              .attr("fill", "#E52E2E")
              .on("mouseover", (event, d, i) => {
                onMouseOver(event, d, i);
              })
              .on("mouseout", (e) => {
                onMouseMove(e);
              })
              .on("mousemove", (e) => {
                onMouseMove(e);
              });

只有蓝色条过渡并出现，但是即使在红色矩阵上调用过渡时，红色条也永远不会出现。

Answer 1

您的rects选择仅在HeartDiseaseByage数组中的数据点上只有一个矩形，无论您对这些矩形有两个甚至更多的“ Enter”选择。

一个非常简单的解决方案是创建两个选择，一个用于每个类别：

let rectsHealthy = svg.selectAll("rect").data(heartDiseaseByAge);
let rectsUnhealthy = svg.selectAll("rect").data(heartDiseaseByAge);

即使它们的数据集相同，它们所代表的内容显然是不同的。然后，您可以独立操纵每个选择。