Question

我在一个网页上有两个类似的条形图，并且有一个月份的下拉列表，根据月份值更改条形图。我只有一个包含所有值的csv文件。现在。我试图根据下拉列表的值更改条形图数据集，但条形图正在更改数据集值但函数exit（）。remove（）无法正常工作，图表会相互追加。

我的代码如下：

 function updateLegend(dataset)
{

var tip1=d3.tip()
        .attr("class","tooltip")
        .offset([-10,0])
        .html(function(d){
        return "<strong>Application Name : </strong><span  style='color:blue'>"+d.AppName+"</span> <br> <strong> Support Cost :</strong> <span style='color:blue'>"+d.Supportcost+"</span>";
        });

 var tip2=d3.tip()
        .attr("class","tooltip")
        .offset([-10,0])
        .html(function(d){
        return "<strong>Application Name : </strong><span style='color:blue'>"+d.AppName+"</span> <br> <strong> Support Hours :</strong> <span style='color:blue'>"+d.Supporthrs+"</span>";
        });    
   x.domain(dataset.map(function(d){return d.AppID;}));
   y0.domain([0,d3.max(dataset,function(d){return d.Supportcost;})]);

 chart1.append("g")
     .attr("class","x axis")
     .attr("transform","translate(0,"+height+")")
     .call(xAxis)
     .selectAll("text")
     .style("text-anchor","end")
     .attr("dx","-0.8em")
     .attr("dy","-.5em")
     .attr("transform","rotate(-90)");

     chart1.call(tip1);
  bars1=chart1.selectAll(".bar").data(dataset);

  bars1.enter()
     .append("rect")
    .attr("class","bar1")
    .attr("x",function(d){return x(d.AppID);})
    .attr("y",function(d){return y0(d.Supportcost);})
    .attr("width",x.rangeBand())
       .attr("height",function(d,i,j) { return height - y0(d.Supportcost);       })
       .on("mouseover",tip1.show)
       .on("mouseout",tip1.hide); 


  x.domain(dataset.map(function(d){return d.AppID;}));
  y0.domain([0,d3.max(dataset,function(d){return d.Supporthrs;})]);



 chart2.call(tip2);
 bars2=chart2.selectAll(".bar").data(dataset);

 bars2.enter()
      .append("rect")
    .attr("class","bar2")
    .attr("x",function(d){return x(d.AppID);})
    .attr("y",function(d){return y0(d.Supporthrs);})
    .attr("width",x.rangeBand())
       .attr("height",function(d,i,j) { return height - y0(d.Supporthrs); })
         .on("mouseover",tip2.show)
       .on("mouseout",tip2.hide); 

  bars1.exit().remove();
  bars2.exit().remove();
  }

我的完整源代码如下： - http://plnkr.co/edit/ibu4H5u5lzuxTFYIqSaF

The bar chart appends like this:

由于

Answer 1

有两个问题：

您选择了一个类（＆＃34; .bar＆＃34;），然后您不能将其用作附加元素的类（您使用＆＃34; bar1＆＃34;），所以它永远不会找到任何.bar实例退出。
一旦解决了这个问题，您需要一个能够唯一识别您设置中每个数据点的数据函数 - 我已经去了appid和月份和年份 - 否则您将永远不会获得任何新元素在选定的第一个月后进入。它们将位于您在此处不使用的更新选择中（选择时未添加.exit（）或.enter（）作为限定符）

对bars1执行以下操作，对bars2执行类似操作（使用.bar2作为类）：

bars1=chart1.selectAll(".bar1").data(dataset, function(d) {
      return d.AppID+d.Month+d.Year;
    });

    bars1.enter()
         .append("rect")
        .attr("class","bar1")
// your code continues...

D3：exit（）。remove（）无法更改下拉列值？

1 个答案: