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...

<g transform="translate(0,198)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">    <g class="tick" opacity="1" transform="translate(40,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Tue 23</text>    </g>    <g class="tick" opacity="1" transform="translate(158.23387096774195,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Thu 25</text>    </g>    <g class="tick" opacity="1" transform="translate(276.4677419354839,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Sat 27</text>    </g>    <g class="tick" opacity="1" transform="translate(394.7016129032258,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Mon 29</text>    </g>    <g class="tick" opacity="1" transform="translate(512.9354838709678,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Wed 31</text>    </g>    <g class="tick" opacity="1" transform="translate(572.0524193548388,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">June</text>    </g>    <g class="tick" opacity="1" transform="translate(690.2862903225807,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Sat 03</text>    </g>    <g class="tick" opacity="1" transform="translate(808.5201612903226,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Mon 05</text>    </g>    <g class="tick" opacity="1" transform="translate(926.7540322580645,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Wed 07</text>    </g>    <g class="tick" opacity="1" transform="translate(1044.9879032258063,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Fri 09</text>    </g>    <g class="tick" opacity="1" transform="translate(1163.2217741935483,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Jun 11</text>    </g>    <g class="tick" opacity="1" transform="translate(1281.4556451612902,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Tue 13</text>    </g>    <g class="tick" opacity="1" transform="translate(1399.6895161290322,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Thu 15</text>    </g>    <g class="tick" opacity="1" transform="translate(1517.9233870967741,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Sat 17</text>    </g>    <g class="tick" opacity="1" transform="translate(1636.157258064516,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Mon 19</text>    </g>    <g class="tick" opacity="1" transform="translate(1754.391129032258,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Wed 21</text>    </g>    <g class="tick" opacity="1" transform="translate(1872.625,0)">
      <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
      <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Fri 23</text>    </g> </g>

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

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

    <g class="tick" opacity="1" transform="translate(1872.625,0)">
          <line stroke="#D8D9DA" y2="0" x1="0.5" x2="0.5" />
          <text fill="#D8D9DA" y="3" x="0.5" dy="0.71em" dx="33.9375">Fri 23</text>    
    </g> 
})

...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.

How do you even use this inside a react component ? Why not just use some other library that is working well already ? — Ozan
– Ozan, Commented Jun 21, 2017 at 10:06
@Ozan - How youtube.com/watch?v=65UojvN1Qqs. Why - I've not found a heatmap that does exactly what we need. — L G
– L G, Commented Jun 21, 2017 at 10:26

L G · Accepted Answer · 2017-06-26 14:21:09Z

1

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 (
              <g key={`${tick}.${index}`} className="tick" transform={translate}>
                <text>{tick}</text>
              </g>
          )
      })


return (<svg width={width} height={height}><g>{xTickElements}</g></svg>)

Any feedback both positive or negative appreciated.

answered Jun 26, 2017 at 14:21

L G

5071 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Converting existing d3 visualization to work with React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related