Jquery 更新数据值时d3中分组条形图的转换

我使用d3.js制作了一个分组条形图。数据来自一个名为“data.csv”的文件。然后，我添加了一个事件侦听器，使用另一个csv文件“data column.csv”在单击时更新图形中的数据。这部分似乎很好用

d3.csv("data.csv", function(error, data) {
 drawGraph(data, false);
});

d3.select("#similar").on("click", function() {
 d3.csv("data-column.csv", function(error, data) {
  drawGraph(data, true);
 });
});

现在，这就是我的问题所在，我需要在这些价值变化之间添加一个过渡。我已经添加了一个转换行，但它似乎不起作用（我必须承认我是d3新手，我想我对代码中如何处理数据缺乏一些基本的理解）

转换方法是drawGraph（数据、更新）功能的一部分：

 function drawGraph(data, update) {
  var genderNames = d3.keys(data[0]).filter(function(key) { return key !== "Category"; }); // get list of column variables : age ranges

  data.forEach(function(d) {
   d.genders = genderNames.map(function(name) { return {name: name, value: +d[name]}; }); // get the name of each category filter and its value
  });


  x0.domain(data.map(function(d) { return d.Category; })); // state names in X axis
  x1.domain(genderNames).rangeRoundBands([0, x0.rangeBand()]); // set separation settings between x values
  y.domain([0, d3.max(data, function(d) { return d3.max(d.genders, function(d) { return d.value; }); })]); // ages in y axis

  /* X axis */
  svg.select(".x.axis").remove();

  svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);

  /* Y axis */
  svg.select(".y.axis").remove();
  svg.append("g")
   .attr("class", "y axis")
   .call(yAxis)

  // Y axis title
  .append("text") 
   .attr("transform", "rotate(-90)")
   .attr("y", 6)
   .attr("dy", ".71em")
   .style("text-anchor", "end")
   .text("Percentage of Calls");

  /* data */

  var category = svg.selectAll(".category")
   .data(data)
    .enter().append("g")
     .attr("class", "g")
     .attr("transform", function(d) { return "translate(" + x0(d.Category) + ",0)"; });

  /* rectangles */  
  var rects = category.selectAll("rect")
   .data(function(d) { return d.genders; });

  if (update) {
   svg.selectAll("rect").remove();
   rects.enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function(d) { return x1(d.name); })
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); })
    .style("fill", function(d) { return color(d.name); })
    rects.exit().remove();
    rects
    .transition().duration(750)
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); });
  } else {
  rects.enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function(d) { return x1(d.name); })
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); })
    .style("fill", function(d) { return color(d.name); })
    rects.exit().remove();
 } 
} 

if（update）{}else{}是用上述onclick事件监听器触发的

我添加了这个remove（）方法，因为当我调用新值时，它们位于第一个值的顶部，就像一个堆叠的条

if (update) {
   svg.selectAll("rect").remove();

关于更多细节，这里是我在这个链接上的整个html/css/js文件。但它不起作用，因为我无法连接CSV

下面是我的初始CSV文件“data.CSV”：

以下是更新值为“data column.CSV”的CSV：

---

提前谢谢你

您应该包含从开始到结束之间的转换：

rects.enter().append("rect")
        .attr("width", 0) //start width
        .attr("height", 0) //start height
        ......
        .transition().duration(750)
            .attr("y", function(d) { return y(d.value); })
            .attr("height", function(d) { return height - y(d.value); }) //end height
            .attr("width", x1.rangeBand()); //end width

希望有帮助

看

Category,women,men
Work environment, 2.92, 1.47
rehab chain, 0.15, 0.29
D. employment%, 0.05, 0.09
Studies, 0.84, 1.55
Rehabilitation, 0.58, 0.96
Coaching, 0.07, 0.10
Salary counseling, 5.92, 7.52
Travel Agreement, 0.12, 0.06
Discharge, 0.27, 0.12
Competition, 1.00, 0.29

rects.enter().append("rect")
        .attr("width", 0) //start width
        .attr("height", 0) //start height
        ......
        .transition().duration(750)
            .attr("y", function(d) { return y(d.value); })
            .attr("height", function(d) { return height - y(d.value); }) //end height
            .attr("width", x1.rangeBand()); //end width