d3.js - 将缩放添加到使用scaleBand的分组条形图

Question

我正在尝试在scaleBand上使用rescaleX向分组条形图添加缩放功能。

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

var x1 = d3.scaleBand()
    .padding(0.05);

var zoom = d3.zoom()
  .scaleExtent([1, 8])
  .translateExtent([[0, 0], [width, height]])
  .extent([[0, 0], [width, height]])
  .on("zoom", () => { zoomed() });

...

function zoomed() {

    var t = d3.event.transform;
    var x0t = t.rescaleX(this.x0);
    var x1t = t.rescaleX(this.x1);

    ...
}

但是t.rescaleX(this.x0)在scaleBand上不起作用，如何将缩放功能应用于scaleBand？

这是完整的代码笔 Grouped Bar Chart

Answer 1

我可以通过将缩放功能更改为来实现此目的:

function zoomed() {

  var t = d3.event.transform;

  // redefine the x0 domain range with the event transform scale (k)
  x0.range([0, width * t.k]);

  // transform .barGroup using redefined domain range and event transform params
  g.selectAll(".barGroup")
    .attr("transform", function(d) { return "translate(" + (x0(d.State) + t.x) + ",0)scale(" + t.k + ",1)"; });

  // apply transform to .axis--x and call xAxis
  g.select(".axis--x")
    .attr("transform", "translate(" + t.x + "," + (height) + ")")
    .call(xAxis);
}

完整代码笔here

更新:缩放scaleBand条形图的更好方法，作者:Mike Bostock(未分组) https://beta.observablehq.com/@mbostock/d3-zoomable-bar-chart

更新 2:更新了分组条形图缩放功能:

function zoomed() {
  x0.range([0, width].map(d => d3.event.transform.applyX(d)));
  x1.rangeRound([0, x0.bandwidth()]);

  g.selectAll(".barGroup").attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
  g.selectAll(".bar").attr("x", function(d) { return x1(d.key); }).attr("width", x1.bandwidth());

  g.select(".axis--x").call(xAxis);
}

完整代码笔:here