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

【问题标题】：d3.js Update time domain based on brush selectiond3.js 根据画笔选择更新时域
【发布时间】：2016-12-26 15:33: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 文件。

【问题讨论】：

标签： javascript d3.js linechart

【解决方案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。

【讨论】：