过渡两组元素不起作用

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 数组中的数据点，而不管您有两个或更多的“输入”选择这些矩形。

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

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

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

过渡两组元素不起作用

Transitioning Two Sets of Elements doesn't work

javascript

d3.js