d3.js 折线图 -> 不要放大

Question

我尝试使 d3.js 图表缩放。我知道我调用了缩放功能，但我真的不知道如何重绘图表。 我使用了一些示例，但它们都与我的图表非常不同。

也许有人可以帮助我，或者给我一个提示。

第一步，我只想缩放 X 轴。

我已将我的尝试上传到 plunker：Plunker

function zoomed() {
    console.log('zoom');
      //var t = d3.event.transform;
      //x.domain(t.rescaleX(x).domain());
      //Line_chart.select(".line").attr("d", line);
      //focus.select(".axis--x").call(xAxis);
    x.range([margin.left, width - margin.right]
                .map(d => d3.event.transform.applyX(d)));

            theChart.select(".path")
                .attr("d", line);

            theChart.select(".x-axis")
                .call(d3.axisBottom(x)
                    .tickSizeOuter(0));
    }

Answer 1

您的代码有错误。在Plunker 中查看它已修复

修复 d3 缩放初始化：

var zoom = d3.zoom().scaleExtent([1, Infinity]).on("zoom", () => zoomed(theChart));

修复缩放回调：

const zoomed = chart =>  chart.attr('transform', d3.event.transform);