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

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

如果我使用.data（），结果与第一张图片中的结果相似，如果我将其更改为.datum（），则第二张图片中没有类似的条形图

我还需要知道在哪里使用d3.data（）和.datum（）

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

提前谢谢

而不是.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});

---

嘿，Abdul，你能用一个例子来创建一个代码笔吗？它正在工作。问题在函数中。谢谢您添加答案

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