AI Features
Home
Courses
Master D3.js for Data Visualization

Custom Bisectors

D3 allows us to create custom bisector functions that search for items in an array.

We'll cover the following...

We are going to create a custom bisector function. D3 comes with a bisect() function, but it is only capable of comparing numbers. We need to compare dates. Luckily, D3 comes with a function for creating a custom bisector for searching through an array with non-numeric values. We’re going to continue working on the event handler function.

Creating a custom bisector

Inside the function, we are going to replace the index variable.

// Tooltip
ctr.append("rect")
  .style('opacity', 0)
  .attr("width", dimensions.ctrWidth)
  .attr("height", dimensions.ctrHeight)
  .on('touchmove mousemove', function(event) {
    const mousePos = d3.pointer(event, this)
    const date = xScale.invert(mousePos[0])
    // Custom Bisector - left, center, right
    const weatherBisect = d3.bisector(xAccessor).left
    const index = weatherBisect(dataset, date)
    const weather = dataset[index - 1]
    console.log(weather)
  })
  .on('mouseleave', function(event) {
    
  })

It is being set too early ...