score:3

Accepted answer

in mike's original code, he chose the name focus for his svg element which is unfortunate - it already exists in the dom, and might be confusing matters.

in any case, the problem here is primarily one of scope.

mike defines focus outside the scope of getting the data, thus putting it into the global scope. therefore, it's available to the brushed() function.

the first step i would take would be to move the definition of the focus var outside of the updatedata() function.

however, there are a few other problems:

  • you should be using d3.tsv with an anonymous function to get the data. it will make things much simpler.
  • in the brushed function, you need to use an anonymous function and pass the area function d.values, rather than just d. you did this in the updatedata function, but not in brushed. i.e.:

    function brushed() {   
        x.domain(brush.empty() ? x2.domain() : brush.extent());
        focus.selectall("path.focus").attr("d", function(d){return area(d.values)});
        focus.select(".x.axis").call(xaxis);
    }
    

i have a rough version of your chart with the brushing working here: http://jsfiddle.net/zq2ef/ but, i would go over mike's example with careful attention to where things are defined, and which scope they are in - it will help you understand where the problem lies!


Related Query

More Query from same tag