使用下拉菜单动态更新条形图

Question

图表显示数据，但当触发更新功能时，它不显示更新的条形图。

如果我使用 .data() ，结果就像第一张图片中一样，如果我将其更改为 .datum() 则没有像第二张图片中那样的条形。

我还需要知道在哪里使用 d3 .data() vs .datum()。

如果可能，请更正我的代码。

提前致谢

var u=  svg.selectAll("rect")
             // .data(data)
          .data(data.filter(function(d)
          {
            return d.ddata==allCourse[0]}))
         // .datum(data.filter(function(d)
         // {
           // return d.ddata==allCourse[0]}))
  // update bars
        u
          .enter().append("rect")
           .merge(u)

          // .attr("class", "bar")
          // .transition()
          // .duration(1000)
          .attr("x", function(d) { return x(d.Item); })
          .attr("y", function(d) { return y(+d.count); })
          .attr("width", x.bandwidth())
          .attr("height", function(d) { return height - y(+d.count); })
          .attr("fill", function(d) { return colours(d.Item); })
          .append("title")
          .text(function(d){
            return d.Item + " : " + d.count});

        svg.append("text")
           .attr("class", "label")
           .attr("y", height/100)
           .attr("x", width/2)
           .attr("text-anchor", "middle")
           .text("Assignments")

        svg.append("text")
           .attr("transform", "rotate(-90)")
                //.text("Range")
           .attr("y", -29)
           .attr("x", -(height/2))
           .attr("text-anchor", "middle")
           .text('Ratio');


    //This function will update the chart
    function update(selectedCourse) {

      // Select new data from the dataset upon select option
      var dataFilter = data.filter(function(d)
      {
        return d.ddata==selectedCourse})

      // update bars

          u
               .datum(dataFilter)
               .transition()
               .duration(250)
               .attr("class", "bar")
               .attr("x", function(d) { return x(d.Item); })
               .attr("y", function(d) { return y(+d.count); })
               .attr("fill", function(d) { return colours(d.Item); })
               .attr("width", x.bandwidth())
               .attr("height", function(d) { return height - y(+d.count); })
               .text(function(d){
                return d.Item + " : " + d.count});

    }

Answer 1

代替 .datum() .data() 对我有用。

function update(selectedGroup) {

  // Select new data from the dataset upon select option
  var dataFilter = data.filter(function(d)
  {
    return d.ddata==selectedGroup})

  // update bars
  svg.selectAll(".bar")
           .data(dataFilter)
           .transition()
           .duration(250)
           .attr("x", function(d) { return x(d.Item); })
           .attr("y", function(d) { return y(+d.count); })
           .attr("fill", function(d) { return colours(d.Item); })
           .attr("width", x.bandwidth())
           .attr("height", function(d) { return height - y(+d.count); })
           .text(function(d){
            return d.Item + " : " + d.count});