Update bar chart dynamically using dropdown menu

Question

The chart shows the data, but when the update function is triggered it doesn't show the updated bars.

If I use .data() the result is like in the first picture and If I change it to .datum() then there is no bar like in the second image.

I need to know also where to use the d3 .data() vs .datum().

Please, if possible correct my code.

Thanks in advance

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

Instead of .datum() .data() works for me.

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