CODEWITHSUNDEEP
javascriptd3.js
Dario
Dario

Reputation: 53

d3 v4 brush extent Error: <rect> attribute x: Expected length, "NaN"

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):

errors

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

Upvotes: 2

Views: 2060

Answers (1)

altocumulus
altocumulus

Reputation: 21578

The initialization of your brush contains an error. When calling brush.extent() you need to specify an array of points, i.e. 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);

Upvotes: 4

Related Questions