轉換兩組元素不起作用

我正在嘗試創建一個堆疊的條形圖。我想在我的圖表中添加一些不錯的轉換，但我收到了一個錯誤。如果我嘗試過渡兩個矩形，則只有藍色矩形過渡并出現。

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);
              });

只有藍條過渡并出現，但紅條永遠不會出現，即使我在紅色矩形上呼叫過渡也是如此。

uj5u.com熱心網友回復：

您的rects選擇只有一個矩形作為heartDiseaseByAge陣列中的資料點，而不管這些矩形有兩個甚至更多“輸入”選擇。

一個非常簡單的解決方案是創建兩個選擇，每個類別一個：

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

即使它們的資料集相同，它們所代表的內容也明顯不同。然后，您可以獨立操作每個選擇。

標籤：javascript d3.js

上一篇：來自d3的“未捕獲的ReferenceError”與RubyOnRails上的importmaps

下一篇：將不透明度應用于未使用d3mouseover懸停的元素