Question

我正在尝试根据＆＃34;刷＆＃34;更新折线图的时域（x轴）。辅助图上的坐标。

这里的小提琴代码 - https://jsfiddle.net/6xpcxvwj/7/

var brush = d3.brushX()
        .extent([[0, 0], [navWidth, navHeight]])
        .on("end", function () {

            xScale.domain(brush.extent());
            console.log("domain modified");

            svg.select("._x_axis").call(xAxis);
            console.log("x axis modified");

            svg.select("._line").attr("d", line);
            console.log("line modified");
        });

因为上面的代码（在小提琴页面的最后）有一些错误，在更新（移动画笔）主图时，它会删除x轴和折线图。

代码基于https://bl.ocks.org/mbostock/1667367，但有一个很大的差异，我的数据集是一个数组，在示例中它是一个csv文件。

Answer 1

在d3版本4中，d3.extent no longer works采用相同的方式（您无法使用它来获取刷新范围）。而是将this functionality has been abstracted改为d3.event.selection。所以试试：

var s = d3.event.selection;
xScale.domain([navXScale.invert(s[0]), navXScale.invert(s[1])]);

修好后，你还需要在你的情节中引入一个剪辑路径。

更新了fiddle。

d3.js根据画笔选择更新时域

1 个答案: