Question

我使用d3.js制作了一个分组的条形图。数据来自名为＆＃34; data.csv＆＃34;的文件。然后我添加了一个事件监听器，使用另一个csv文件＆＃34; data-column.csv＆＃34;来更新图中的数据。这部分似乎工作正常。

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();
 } 
}

上面提到的onclick事件监听器触发了if（update）{} else {}。

我添加了这个remove（）方法，因为当我调用新值时，它们会出现在第一个像堆叠条的顶部..

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

有关详细信息，请参阅此jfiddle链接上的整个html / css / js文件。它不起作用，因为我无法附加CSV

下面的

是我的初始CSV文件＆＃34; data.csv＆＃34;：

Category,women,men
Work environment,71.94,28.06
rehab chain,71.22,28.78 
D. employment%,70.93,29.07
Studies,70.44,29.56
Rehabilitation,68.13,31.87
Coaching,66.35,33.65
Salary counseling,62.23,37.77
Travel Agreement,37.74,62.26
Discharge,36.91,63.09
Competition,27.10,72.90

以下是包含更新值的CSV＆＃34; data-column.csv＆＃34;：

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

提前谢谢！

Answer 1

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

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

希望它有所帮助！

请参阅plnkr

更新数据值时，在d3中转换分组条形图

1 个答案: