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

Question

I am trying to follow this example: http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

I think the problem is setting the extent of the brushX , following in an error for the rect overlay and selection.

Here is my code, almost copied from the example:

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

the errors are at the line "call(brush):

I already tried to select the rect and add the values like in this example .

Answer 1

The initialization of your brush contains an error. When calling brush.extent() you need to specify an array of points, ie an array of arrays (nested array):

# brush . extent ([ extent ]) <>

If extent is specified, sets the brushable extent to the specified array of points [[ x0, y0 ], [ x1, y1 ]]

Thus, your intialization becomes

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