Question

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

在这里你可以看到蓝色女人的重建地点：

我创建了两个全局变量：

appRoleToUpdate

以下是创建载入数据并引入红色图像的位置：

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

我尝试使用on按钮点击功能以及拉出的数据，但我没有运气。

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。确保这是正确的，而不是拼写错误。

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

1 个答案: