d3 v4画笔范围错误：<rect>属性x：预期长度，“NaN”

Question

我试图效仿这个例子：http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我认为问题是设置brushX的范围，跟随矩形叠加和选择的错误。

这是我的代码，几乎从示例中复制过来：

var brush = d3.brushX()
                .extent([0,0],[brushChart.width,brushChart.height])
                .on("brush end",brushed);
context = svg.append("g")
                    .attr("class", "context")
                    .attr("transform", "translate(" + brushMargin.left + "," + brushMargin.top + ")");
context.append("g")
                    .attr("class", "brush")
                    .call(brush) //this throws errors

错误在“call（brush）：

行

我已经尝试选择矩形并添加this example中的值。

Answer 1

画笔的初始化包含错误。调用brush.extent()时，您需要指定点的数组，即数组数组（嵌套数组）：

  

# 刷。范围（[范围]）<>

     

如果指定了范围，则将可刷新范围设置为指定的点数组[[ x0，y0 ]，[ x1，y1 ]]

因此，您的初始化变为

var brush = d3.brushX()
                .extent([[0,0],[brushChart.width,brushChart.height]]) // [[x0,y0], [x1,y1]]
                .on("brush end",brushed);