Question

我认为我在做d3工作的同时学习了一些关于ES6课程的知识，所以我制作了一个序数条形图类（fiddle here）。它显示多个系列的数据（例如：

[
    [{"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's code。

我从.call(this.yAxis)收到内部d3错误，转换没有动画，而且y轴没有更新。此外，酒吧也不会过渡。出了什么问题？

Answer 1

几个问题：

在更新数据连接之前更新scaleOrdinal / scaleBand轴，否则条形码将无法找到其y比例属性(y(d.yourOrdinalLabel)。因此轴代码需要在条形码之前。
bars（或您加入数据的任何元素）应该被声明为该连接操作的结果，以便可以将.attr()链接到视觉属性。 let bars = svg.selectAll(".yourClass").data(yourData);
如果您只是在切换现有数据系列的排除，而不是添加新数据，那么在课堂上使用简单的update方法会更明智。见更新小提琴。

Working jsfiddle.

如何更新＆amp;在d3 v4中过渡ordinalScale轴

1 个答案: