0

我想我会在做一些 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 的代码。

我从 中得到一个内部 d3 错误.call(this.yAxis)，过渡没有动画，并且 yaxis 没有更新。此外，条形图也不会转换。怎么了？

4

1 回答 1

0

几个问题：

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

工作jsfiddle。

于 2016-10-10T18:27:58.773 回答