Converting existing d3 visualization to work with React

Question

I'm fairly new to both d3 and React so please be gentle :)

I have an existing d3 Heatmap which I'm attempting to modify to work in React.

I'm trying to follow the approach set out in this vid...

https://www.youtube.com/watch?v=65UojvN1Qqs

...which basically says to use d3 for it's math smarts, and react for the DOM manipulation.

However I'm stuck trying to translate the following x-axis code taken from the existing heatmap...

// X-SCALE

    var xScale = d3
      .scaleTime()
      .domain(domain)
      .nice()
      .range(range);

    var xAxis = d3
      .axisBottom(xScale)
      .tickSize(0);

    function customXAxis(g) {
      let textAdjustment = blockWidth / 2;
      g.call(xAxis);
      g.select(".domain").remove();
      g.selectAll(".tick line").attr("stroke", "#D8D9DA");
      g.selectAll(".tick text").attr("fill", "#D8D9DA").attr("dx", textAdjustment);
    }

    g.append("g")
      .attr("transform", "translate(0," + plotAreaheight + ")")
      .call(customXAxis);

Depending on the values given to domain and range, should output something along the lines of...

In my head I feel that I want to be able to map the results of the xAxis. Something like...

xAxis().map((d, i) => { 

    
          
          Fri 23    
     
})

...but can't get it to work. In the original, xAxis is being invoked with g.call(xAxis); which will give it some sort of context to work with, which is what I think I'm missing.

Any feedback appreciated.

L G · Accepted Answer

Answering my own question here. Hopefully someone else might find it handy:

    const xScale = scaleTime()
        .domain(domain)
        .range(range);

      const xTicks = timeScale.ticks()

      const xTickElements = timeTicks.map((tick, index) => {
          const position = xScale(tick)
          const translate =`translate(0, ${position})`
          return (
              
                {tick}
              
          )
      })


return ()

Any feedback both positive or negative appreciated.

Converting existing d3 visualization to work with React

Answers (1)

Related Questions