如何在d3 v4中更新和转换ordinalScale轴

Question

我以为我在做d3工作时会学到一些关于ES6类的知识，所以我做了一个有序条形图类（ 在这里摆弄 ）。 它显示多个数据系列（例如：

[
    [{"label":"apple", "value" :25},
    {"label":"orange", "value": 16},
    {"label":"pear", "value":19}],

    [{"label":"banana", "value" :12},
    {"label":"grape", "value": 6},
    {"label":"peach", "value":5}]
];

我正在尝试使更新部分正常工作（您可以在其中提供新数据，并且棒/轴过渡很好）。 不幸的是，很多示例代码都是针对v3的，似乎不像我正在使用的v4那样工作。 具体方法是：

updateData(data){
    //get an array of the ordinal labels out of the data
    let labels = function(data){
        let result = [];
        for(let i=0; i<data.length; i++){
            for (let j=0; j<data[i].length; j++){
                result.push(data[i][j].label);
            }
        }
        return result;
    }(data);

    //loop through the (potentially multiple) series in the data array
    for(let i=0; i<data.length; i++){
        let series = data[i],
            bars = this.svg.selectAll(".series" + i)
        bars
            .data(series)
          .enter().append("rect")
            .attr("class", ("series" + i))
            .classed("bar", true)
          .merge(bars) 
            .attr("x", 0)
            .attr("height", this.y.bandwidth())
            .attr("y", (d) => { return this.y(d.label); })
            .transition().duration(500) //grow bars horizontally on load
            .attr("width", (d) => { return this.x(d.value); });
        bars.exit().remove();
    }

    //update domain with new labels
    this.y.domain(labels);
    //change the y axis
    this.svg.select(".yaxis")
        .transition().duration(500)
        .call(this.yAxis)
}

我正在尝试将更新模式基于Mike Bostock的代码 。

我从.call(this.yAxis)收到内部d3错误，过渡没有动画，并且yaxis没有更新。 此外，这些条也不会过渡。 怎么了

Answer 1

几个问题：

• 在更新数据联接之前，请更新scaleOrdinal / scaleBand轴，否则，条形图将无法找到其y比例尺属性(y(d.yourOrdinalLabel) 。因此，轴号必须在条码之前。
• bars （或连接到数据的任何元素）应声明为该连接操作的结果，以便可以将其与.attr()链接以获得可视属性。 let bars = svg.selectAll(".yourClass").data(yourData);
• 如果只打算切换现有数据系列的排除，而不添加新数据，则在类中具有一个简单的update方法更为明智。 参见更新的小提琴。

工作jsfiddle。