javascript - d3js 版本 3 到 4 用于切换条形图

Question

我试图让这个旧版本的条形图切换与版本 4 一起使用。我还希望减少它对下划线的依赖 - 是否有 vanilla js 版本来处理数据的过滤/排序以切换图例？



第 3 版
https://jsfiddle.net/shashank2104/xhgew00y/16/

版本 4 - 当前迁移
https://jsfiddle.net/q6vu27w3/2/

当前的示例不是渲染。

我已更改 d3.scale.ordinal().rangeRoundBand ，但转换可能不正确。

v3

var x0 = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
  .range([height, 0]);

v4

var x0 = d3.scaleBand()
        .domain([0, width])

var x1 = d3.scaleBand();

var y = d3.scaleLinear()
    .range([height, 0]);

Answer 1

这些是代码中的更改，以使其在版本 4 中工作。

scaleBand() 仅适用于数值范围。对于字符串范围(颜色)，我们应该使用 d3.scaleOrdinal() 而不是 d3.scaleBand()。

 var colorScale = d3.scaleOrdinal().range(["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#8bf41b"]); 

接下来，在 x0 声明中，您指定的不是域，即范围，并且 rangeRoundBand() 在版本 4 中转换为 rangeRound().padding()。因此 x0 声明变为

var x0 = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1);

然后 barGroups 变量应该从

var barGroups = chartHolder.selectAll("g.bars")
.data(data);

至

var barGroups = chartHolder.selectAll("g.bars")
        .data(data)
        .enter().append("g")
        .attr("class", "bars")
        .attr("transform", function(d) {
            return "translate(" + x0(d.label) + ",0)";
        });

然后 barEnter 变量也应该从

var barEnter = barGroups.selectAll("rect")
        .data(function(d) {
            return d.valores.filter(function(k) { return !k.hidden; }) ;
        });

至

var barEnter = barGroups.selectAll("rect")
        .data(function(d) {
            return d.valores.filter(function(k) { return !k.hidden; }) ;
        })
        .enter().append("rect").attr('height', 0).attr('y', height).attr('x', 0).attr('width', 0).style('fill',function(d, i) {
        return colorScale(d.name); //colores_google(i);
    });

将动画应用于所有附加的矩形元素。

如果做了这些改动，那么版本 4 中的条形图就可以正常工作了。

_.findWhere() 可以替换为

Array.prototype.getIndexBy = function (name, value) {
    for (var i = 0; i < this.length; i++) {
        if (this[i][name] == value) {
            return i;
        }
    }
    return -1;
}

然后在 toggleBar() 函数中，您可以执行以下操作:

data.forEach(function(d) { 
   var d.filteredValores = d.valores[d.valores.getIndexBy("hidden", state)];
});

现在，filteredValores 属性由满足给定状态的 valores 组成。然后我们可以从该过滤属性中检索名称。希望这会有所帮助。