Question

我正在尝试在下拉列表中的值更改时显示和更新相同的更改数据。您将看到文本数据按预期更改，但条形图未正确更新。它似乎在写自己。您可以在此处找到正在运行的示例代码：http://jsfiddle.net/khnumtemu/43oaczq8/15/

// Create a distinct list of FSMs
  var uniqueValues = d3.map([])
  dataset.forEach(function(d){ uniqueValues.set(d.FsmId, d); });

  var newJsonStr = []
  uniqueValues.forEach(function(d){ newJsonStr.push(uniqueValues.get(d)); });

  // Create and Fill Dropdown
  d3.select("body").append("select")
    .classed('colorSelect',true)
    .selectAll("option")
    .data(newJsonStr)
    .enter()
    .append("option")
    .attr("value",function(d){ return d.FsmId;})
    .text(function(d){ return d.FieldSalesManagerName + " (" + d.FsmId + ")";})
    .sort(function(a, b) {return d3.descending(a.FieldSalesManagerName, b.FieldSalesManagerName);});


// Inital Data OnLoad
  var intsel = d3.select(".colorSelect").node().value;
  d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text(function(d){
          if(d.FsmId == intsel){
            return d.SalesRepName;
          }
    })

  var w = 800;
  var h = 500;
  var x = d3.scale.linear().domain([0,d3.max(dataset)]).range([0,w]);
  var y = d3.scale.linear().domain([0,dataset.length]).range([0,h]);
  var svg = d3.select("body").append("svg")
                .attr({
                  "id":"chart",
                  "width":w,
                  "height":h
                  })

  svg.selectAll(".bar")
    .data(dataset)
    .enter()
    .append("rect")
    .filter(function(d,i){if(d.FsmId == intsel){
            return d.AchievementCount;
          }})
    .attr({
      "class":"bar",
      "x":0,
      "y": function(d,i){
         return y(i);
      },
      "width": function(d,i){
        return d.AchievementCount;
      },
      "height": function(d,i){ return y(1) -1; }
    })


  // Data Updated on Selected Change
  d3.select("select")
    .on("change", function(d){

      var sel = d3.select(".colorSelect").node().value;
      d3.select("body").selectAll("p")
        .data(dataset)
        .text(function(d){
          if(d.FsmId == sel){
            return d.SalesRepName;
          }
        })



        svg.selectAll(".bar")
        .data(dataset)
        .enter()
        .append("rect")
        .filter(function(d,i){if(d.FsmId == sel){
                return d.AchievementCount;
              }})
        .attr({
          "class":"bar",
          "x":0,
          "y": function(d,i){
             return y(i);
          },
          "width": function(d,i){
            return d.AchievementCount;
          },
          "height": function(d,i){ return y(1) -1; }
        })

    });

Answer 1

更新d3可视化文件遵循输入，更新和退出工作流程（开始阅读here和here）。

您只处理输入案例。因此，在每个.on上，您在rect之后的rect之后追加rect。您永远不会退出（删除rects）或更新（更新现有rects）。解决这个问题的正确方法是处理那些senerios。

当然，使用与您一样小的数据集，轻松修复（您不会看到性能损失）只是删除并重新添加所有内容。

svg.selectAll(".bar").remove();

示例here。

D3 .on更改适用于不在图表上的文本

1 个答案: