javascript - 条形图在数组中的 3 个变量之间切换

Question

我有一个条形图，它使用以下数据集来表示三个维度:

var dataset = [
  [5, 23, 75],
  [10, 14, 34],
  [13, 67, 23],
  [19, 10, 65],
  [21, 42, 29],
  [25, 25, 25],
  [22, 90, 30],
  [18, 57, 17],
  [15, 25, 35],
  [13, 26, 39],
  [11, 17, 85],
  [12, 36, 24],
  [15, 60, 45],
  [20, 41, 11],
  [18, 77, 33],
  [17, 85, 55],
  [16, 23, 44],
  [18, 35, 23],
  [23, 55, 15],
  [25, 45, 100]
];

有一个由 svg 元素构造的条形图和一个重新排序条形图的函数:

var sortBars = function() {

  svg.selectAll("rect")
    .sort(function(a, b) {
      if (sortOrder) {
        return d3.ascending(a[0], b[0]);
      }
    })
    .transition()
    .duration(1000)
    .attr("x", function(d, i) {
      return xScale(i);
    });
  svg.selectAll("text")
    .sort(function(a, b) {
      if (sortOrder) {
        return d3.ascending(a[0], b[0]);
      }
    })
    .transition()
    .duration(1000)
    .attr("x", function(d, i) {
      return xScale(i) + 2.5;
    });
};

这会根据数组中的第一个变量对条形图/文本进行重新排序，但我希望用户看到其他两个变量 (a[1],b[1] & a[2],b[2] ) 当他们点击条形图时。我正在为一个项目执行此操作，我的讲师建议使用模数 (%) 运算符在这些变量之间切换，但我一无所获!我尝试制作一个 if...else 函数来在两个变量之间切换，但我认为这不是解决方案。提前致谢!

Answer 1

您的讲师试图说的是，如果您设置一个计数器，counter % 3 将返回除以 3 的余数，有效地循环遍历 0、1 和 2。看一下这里:

console.log(d3.range(50).map(d => d % 3).join())

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

因此，在您的情况下，我们可以设置一个计数器并使用余数运算符对条形进行排序。为避免创建全局计数器，我将在此处创建一个闭包:

bars.on("click", sortBars());

function sortBars() {
  let counter = 0;
  return function() {
    ++counter;
    bars.sort(function(a, b) {
        return d3.ascending(a[counter % 3], b[counter % 3]);
      })
      .transition()
      .attr("x", (_, i) => i * 15)
  }
};

这是一个使用您的数据的演示:

var dataset = [
  [5, 23, 75],
  [10, 14, 34],
  [13, 67, 23],
  [19, 10, 65],
  [21, 42, 29],
  [25, 25, 25],
  [22, 90, 30],
  [18, 57, 17],
  [15, 25, 35],
  [13, 26, 39],
  [11, 17, 85],
  [12, 36, 24],
  [15, 60, 45],
  [20, 41, 11],
  [18, 77, 33],
  [17, 85, 55],
  [16, 23, 44],
  [18, 35, 23],
  [23, 55, 15],
  [25, 45, 100]
];

const svg = d3.select("svg");
const bars = svg.selectAll(null)
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (_, i) => i * 15)
  .attr("width", 12)
  .attr("y", d => 150 - d[0] * 4)
  .attr("height", d => d[0] * 4);

bars.on("click", sortBars());

function sortBars() {
  let counter = 0;
  return function() {
    ++counter;
    bars.sort(function(a, b) {
        return d3.ascending(a[counter % 3], b[counter % 3]);
      })
      .transition()
      .attr("x", (_, i) => i * 15)
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>