Javascript d3.js: initialize the brush with brush.extent and stop the data from spreading around the edge

Question

I have 2 questions that I want to fix with my current d3 application based on this :

Here's the fiddle: http://jsfiddle.net/zoa5m20z/

• I want to initialize my brush so that by default only a small certain part starts when the application starts. I tried the following with .extentbut no luck.

  //date parsing function
  var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
  
  //setting up brush and defaultExtent
  var brush = d3.svg.brush()
  .x(x2)
  .extent([parseDate("2014-08-11 10:20:00"), parseDate("2014-08-11 18:20:00")]) //trying to intialize brush
  .on("brush", brushed);
  

• I want my circles built to not overlap with yaxis. I want to only draw / show circles to the right of the y axis when the brush moves. Just like the canonical Bostock Focus + Context via Brushing Block . I tried to play with fields, scales, domains, ranges, but haven’t helped yet.

What I'm trying to avoid:

I am new to d3.js, so all tips and tricks are welcome and appreciated!

Answer 1

Here is a working example based on your code: http://jsfiddle.net/26sd8uc9/4/

1 - You are right in .extent, the problem is that you did not specify the domain for the x2-scale. By adding the following code, it works:

x2 = d3.time.scale()
   .domain([
     parseDate("2014-08-11 05:30:00"), 
     parseDate("2014-08-12 19:25:00")
   ])
   .nice(d3.time.minute)
   .range([0, width]);

, , .call(brush.event):

  // brush slider display
  context.append("g")
      .attr("class", "x brush")
      .call(brush)
      .call(brush.event)
      .selectAll("rect")
      .attr("y", -6)
      .attr("height", height2 + 7);

2 - , , , , ( )

var currentRange;

var inRange = function(d) { 
    if(!currentRange || d.time < currentRange[0] || d.time > currentRange[1] ) {
        return 0;
    } else {
        return 5;
    }
}

function brushed() {

  currentRange = (brush.empty()? undefined : brush.extent());

  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".x.axis").call(xAxis);
  mydots.selectAll(".circle")
   .attr("cx", xMap)
   .attr("cy", yMap)
   .attr("r", inRange); // set radius to zero if it not in range
  console.log(brush.extent())
}

- :

        .domain([
            d3.min(dataset, function(d){ return d.time; }), 
            d3.max(dataset, function(d){ return d.time; })
        ])

, , .

Answer 2

brush.event, .

  brush = d3.svg.brush()
      .x(x)
      .extent([config.start, d3.time.day.offset(config.start, config.range)])
      .on("brush", brushmove)
      .on("brushend", brushend);

  gBrush = svg.select('.brush')
    .call(brush);

  gBrush.call(brush.event);

, , . , move/zoom :

  // update the data so that only visible points are shown
  var points= svg.selectAll('.point')
      .data(function(d) { return onScreen(d, brush.extent); },
            function(d) { return d.id; });

  // draw the points that are now onscreen
  var pointsEnter = points.enter().append('g').attr('class', 'point');

  // remove any points that are now offscreen
  points.exit().remove();

  // up date the x/y position of your points based on the new axis.
  // ... left up to you

, , , .

, http://bl.ocks.org/bunkat/1962173.