CODEWITHSUNDEEP
javascriptreactjsd3.js
Maikon Weber Carvalho
Maikon Weber Carvalho

Reputation: 45

Heatmap in d3.js/React.js - the rect element is not rendered in the graph

I'm trying to build a heat graph using d3 data, but it doesn't render all the squares:

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {
   setState(data)
   svg.selectAll()
     .data(state, function(d){ return d.group+ ':' +d.variable ;})
     .enter()
     .append("rect")
     .attr("x", function(d) { return x(d.group) })
     .attr("y", function(d) { return y(d.variable) })
     .attr("width", x.bandwidth() )
     .attr("height", y.bandwidth() )
     .style("fill", 'red' )
  })
}, [])

Upvotes: 1

Views: 62

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

In V6, d3.csv is implemented as a promise. Also, specify a correct selection for selectAll :

const [graphData, setGraphData] = useState(null);

...

d3.scv('https://...').then(data => setGraphData(data));

...

useEffect(() => {
  if (graphData) {
    svg.selectAll('rect')
      .data(graphData, d => `${d.group}:${d.variable}`)
      .enter()
      .append('rect')
      ...
  }
}, [graphData]);

Upvotes: 1

Related Questions