JavaScript / D3.js：单击按钮时数据未更新，而是绘制了新位置

Question

当点击按钮时，红色女性（未接种疫苗）和蓝色女性（接种疫苗）都应更新以反映新值。当前在按钮上单击红色女人更新，但蓝色女人在应该更新到的位置重新创建。怎样才能让蓝色女人像红色女人一样过渡和更新？

在这里你可以看到蓝色女人的再现位置：

我创建了两个全局变量：

 var numOfPartner = 'zero';
 var status = 0;

这里是创建加载数据和引入红色图像的地方：

d3.csv("link to data", function(error, data) {

    if (error) {
      console.log("error reading file");
    }

    data.sort(function(a, b) {
      return d3.descending(+a.status, +b.status);
    });

    // you should calculate using d3.max for your data
    widthScale.domain([0, d3.max(data, function(d) {
      return +d.start;
    })]);

    heightScale.domain(data.map(function(d) {
      return +d.average;
    }).slice(1));

    var rects = svg.selectAll("rect")
    .data(([data[0]]))
    .enter()
    .append("rect");

    rects
      .attr("x", 0)
      .attr("y", function(d) {
        return heightScale(d.status);
      })
      .attr("width", function(d) {
        return widthScale(+d.average);
      })
      .attr("height", heightScale.rangeBand());

    svg.selectAll("text")
      .attr("class", "label")
      .data(([data[0]]))
      .enter()
      .append("text")
      .text(function(d) {
        return +d.average + " %";
      })
      .attr("x", function(d) {
        return widthScale(+d.average) + 5;
      })
      .attr('y', '-45')
      .attr("fill", "#8a8c8e")
      .attr("font-size", "24")
      .attr("font-weight", "700")

    // Style the axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .attr("fill", "#808285");

    // Label below x axis
    svg.append("text")
      .attr("class", "xlabel")
      .attr("transform", "translate(" + width / 2 + " ," +
            height + ")")
      .style("text-anchor", "middle")
      .attr("dy", "0")
      .text("  ")
      .attr("fill", "#5582b0")
      .attr("font-weight", "600");

    svg.selectAll("image1")
      .data(([data[0]]))
      .enter()
      .append("svg:image")
      .attr("x", function(d) {
        return widthScale(+d.average) - 45;
      })
      .attr('y', '-40')
      .attr("height", 200)
      .attr("width", 115)
      .attr("xlink:href", "link to red woman");

这是红色女人工作但蓝色女人不工作的按钮更新功能：

d3.selectAll("button").on("click", function() {
     if (this.id == "unvaccinated")
         status = 0;
     else if (this.id == "vaccinated") {
         status = 1;
     } else {
         numOfPartner = this.id;
     }
     svg.selectAll("image2")
         .data(([data[1]]))
         .enter()
         .append("svg:image")
         .attr("x", function(d) {
             return widthScale(data[1][numOfPartner]) - 45;
         })
         .attr('y', '-40')
         .attr("height", 200)
         .attr("width", 115)
         .attr("xlink:href", "link to blue woman");

     rects
         .data(data)
         .transition()
         .duration(1000)
         .ease("linear")
         .attr("width", function(d) {
             return widthScale(data[status][numOfPartner]);
         });

     svg.selectAll("text")
         .data(([data[0]]))
         .transition()
         .duration(1000)
         .ease("linear")
         .attr("x", function(d) {
             return widthScale(data[status][numOfPartner])
         })
         .text(function(d) {
             return data[status][numOfPartner] + " %"
         });

     svg.selectAll("image")
         .data(([data[0]]))
         .transition()
         .duration(1000)
         .ease("linear")
         .attr("x", function(d) {
             //get correct number     
             return widthScale(data[status][numOfPartner]) - 45;
         });


     svg.selectAll("image2")
         .data(([data[1]]))
         .transition()
         .duration(1000)
         .ease("linear")
         .attr("x", function(d) {
             //get correct number     
             return widthScale(data[1][numOfPartner]) - 45;
         });

     });

});

我曾尝试使用按钮单击功能以及正在提取的数据，但我没有任何运气。

Answer 1

如果没有看到数据或现场演示，很难说 100% 出了什么问题，但我可以在点击回调中看到问题。将此代码移至d3.csv 回调：

 svg.selectAll("image2")
     .data(([data[1]]))
     .enter()
     .append("svg:image")
     .attr("x", function(d) {
         return widthScale(data[1][numOfPartner]) - 45;
     })
     .attr('y', '-40')
     .attr("height", 200)
     .attr("width", 115)
     .attr("xlink:href", "link to blue woman");

这会为您的 SVG 添加一个新元素，而不是进行更新。这可能不是您在点击回调中想要的。这应该在某个地方的初始化函数中。您稍后在回调中有正确的更新代码，但这不会按预期工作，因为添加了一个新元素。

另外，我注意到您在数据回调中使用image1，在点击回调中使用image1。确保这是正确的，而不是拼写错误。