在可变长度d3的多维数组上迭代

Iterating over multidimensional array with variable length d3

本文关键字：数组 迭代 d3      更新时间：2023-09-26

我有一个由整数值组成的多维数组，我想用它在d3.js中创建条形图。对于每一行，我想根据元素的值创建一个颜色编码的矩形。此外，每个矩形的高度取决于一行中存在的值的数量以及每行中值的平均值

请查看此处的图形：可变长度条形图：https://i.stack.imgur.com/gYZAe.png

在上图中，每一列表示多维数组中一行中的值。现在我面临的问题是，当执行以下操作时，我无法迭代多维数组：

bar = svg.selectAll(".bar")
.data(allrankings)
.enter().append("rect")

注：allranking是多维数组。

我目前正在做的是创建另一个大数组，将所有排名都放在一个维度上，并对其进行迭代，同时跟踪元素属于哪一行。有更好的方法来解决这个问题吗？

您可以使用svg组和多个.data调用来访问多维数据。您可以阅读Mike Bostock关于嵌套选择的教程中的更多内容：https://bost.ocks.org/mike/nest/#data

在您的情况下，如果allranking是一个像[[0,1,2,3]，[2,3]]这样的多维数组，那么代码可以是这样的：

// process the data so the average and number of elements are visible to each bar
var data = allrankings.map(function(rankings){
    var avg;
    avg = rankings.reduce(function(a,b){ return a+b; })/rankings.length;
    return rankings.map(function(d){
        return {val: d, avg: avg, numBars: rankings.length};
    });
});
var barGroups = svg.selectAll(".bar-groups")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d, i){
     return "translate("+ i*20 + ",0)"; // may want to use scales
   })
  .classed("bar-groups",true);
var bars = barGroups
  .selectAll(".bars")
  .data(function(d){ 
    return d; // returns a one dimensional array of objects
   })
  .enter()
  .append("rect");

然后您可以通过.avg、.val和.numBars属性分配值（例如bars.attr("height", function(d){ return d.avg/d.numBars; });

Gilsha在https://bl.ocks.org/mbostock/3886208

相关文章：