javascript - 更新选择不起作用

Question

我是 D3 的新手，我正在尝试显示一个简单的 d3 条形图，它根据下拉菜单更改它正在可视化的数据属性 - 数据保持不变并且我显示相同的标签(x 轴) 对于每个下拉选择，只有标签应该转换/更改它们的顺序，而栏值应该根据它们显示的属性转换/更改。

然而，当下拉菜单发生变化时，转换(更新)选择不会被调用 - 它仅在图表首次加载时被调用。因此，根据代码，y 轴正在更改其数值，但高度始终保持与启动时相同，因此尽管标签发生变化，条形图根本不会动画。

updateChart(menuSelection) { // called when dropdown selection changes, and initially upon page load with default menuSelection
    // I sort the data by the attribute of the dropdown item selected
    this.myData.sort(function(a,b){
        if(menuSelection == 1) return b.count - a.count;
        else if(menuSelection == 2) return b.positiveCount - a.positiveCount;
        else return b.negativeCount - a.negativeCount;
    });

    var m = this.myData.length;
    var svg = d3.select(".chart"),
        margin = {top: 40, right: 25, bottom: 40, left: 25},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;
    var g = svg.select("g.rectGroup").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("class", "rectGroup");
    if(g.empty()) {
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("class", "rectGroup");
    }

    var x = d3.scaleBand()
        .domain(myData.map(function(d) { return d._id; }))
        .range([0, width])
        .padding(0.08);

    var yMax = d3.max(this.myData, function(d) {
        if(this.menuSelection == 1) return d.count;
        else if(this.menuSelection == 2) return d.positiveCount;
        else return d.negativeCount;
    });
    var y = d3.scaleLinear()
        .domain([0, yMax])
        .range([height, 0]);

    var xAxis = d3.axisBottom()
        .scale(x);
    var yAxis = d3.axisLeft()
        .scale(y);

    var yz = getHeights(m, menuSelection, this.myData); // ARRAY OF HEIGHTS DEPENDING ON MENU DROP DOWN SELECTION

    var bars = g.selectAll(".bar")
        .data(this.myData, function(d) {
            return d._id; // KEY IS ITEM NAME FOR OBJECT CONSTANCY; ALL ITEMS ARE DISPLAYED REGARDLESS OF ATTRIBUTE SELECTED, BUT ORDER/VALUES CHANGE FOR EACH ITEM
        })
        .enter().append("rect")
        .attr("class", "bar")
        .attr("height", 0)
        .attr("y", height);

    bars.transition().duration(700)
        .attr("x", function(d) { return x(d._id); })
        .attr("width", x.bandwidth())
        .attr("y", function(d, i) { return y(yz[i])})
        .attr("height", function(d, i) {
            return height - y(yz[i])
        });

    bars.exit().remove();

    svg.selectAll(".axis").remove();

    var height_to_use = +svg.attr("height") - margin.bottom
    var xAxis_g = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(" + margin.left + "," + height_to_use + ")")
        .call(xAxis)
        .selectAll(".tick text")
        .call(wrap, x.bandwidth());

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(yAxis);

    function getHeights(m, menuSelection, data) {
      var values = [];
      for (var i = 0; i < m; ++i) {
        if(menuSelection == 1) {
          values[i] = data[i].count;
        } else if(menuSelection == 2) {
          values[i] = data[i].positiveCount;
        } else {
          values[i] = data[i].negativeCount;
        }
      }
      return values;
    }
}

Answer 1

实际上，您没有代码中的更新选择。

要进行更新选择，请像这样拆分您的“输入”选择:

//this is the update selection
var bars = g.selectAll(".bar")
    .data(data, function(d) {
        return d._id;
    });

//and the remainder is the enter selection
bars.enter().append("rect")
    .attr("class", "bar")
    .attr("height", 0)
    .attr("y", height);

此外，值得一提的是，由于您的代码中没有更新选择，因此...

bars.exit().remove();

...没用。