将 D3 带缩放从 v3 升级到 v4

Question

我正在尝试将这个fiddle更新到D3 v4版本。 http://jsfiddle.net/AdamMills/Ljeh2etj/ 这是原始的缩放函数。

bars.attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");
chart.select(".x.axis").attr("transform", "translate(" + d3.event.translate[0]+","+(height)+")")
    .call(xAxis.scale(x.rangeRoundBands([0, width * d3.event.scale],.1 * d3.event.scale)));
chart.select(".y.axis").call(yAxis);

我根据d3-zoom的文档尝试进行更新。

    bars.attr("transform", d3.event.transform);
chart.select(".x.axis").attr("transform", d3.event.transform)
    .call(xAxis.scale(d3.event.transform.rescaleX(x)));
chart.select(".y.axis").call(yAxis);

我在recaleX中遇到了未定义的错误，我错过了什么？

- Adam Mills

---

看起来是因为bandScale没有反转方法。 - Ilyakom

Answer 1

您可以从fiddle更改缩放函数中的第二行：

chart.select(".x.axis")
                    .attr("transform", "translate(" + d3.event.transform.x + "," + (height) + ")")
                        .call(
                             xAxis.scale(
                                 x.rangeRound([0, width * d3.event.transform.k])
                                     .paddingInner(.1 * d3.event.transform.k)));;

- Ilyakom