React-d3 Chart Not Showing

Question

I have performed the step by step instructions for getting a chart in react-d3 :

http://www.reactd3.org/get_start/

I added this to my code and I see nothing.

However if I inspect then I do see an SVG tag with some things in it.

Has some element been flattened or do you need to set something up for displaying SVG in the browser?

My exact code looks like this :

import React from 'react';

var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;

class WelcomeView extends React.Component {

  render() {

    var chartData = [
      {"name":"Darron Weissnat IV","BMI":20.72,"age":39,"birthday":"2005-01-03T00:00:00.000Z","city":"East Russel","married":false,"index":0},
      {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20},
      {"name":"Miss Demond Weissnat V","BMI":21.44,"age":19,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21},
      {"name":"Easton Mante","BMI":20.61,"age":43,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22},
      {"name":"Dayton Ebert","BMI":29.88,"age":20,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23}
    ]

    var width = 700,
      height = 300,
      margins = {left: 100, right: 100, top: 50, bottom: 50},
      title = "User sample",
      chartSeries = [
        {
          field: 'BMI',
          name: 'BMI',
          color: '#ff7f0e'
        }
      ],
      // your x accessor
      x = function(d) {
        return d.index;
      }

    return (
      <div>
          <div>
            <Chart
              title={title}
              width={width}
              height={height}
              margins= {margins}
            >
              <LineChart
                margins= {margins}
                title={title}
                data={chartData}
                width={width}
                height={height}
                chartSeries={chartSeries}
                x={x}
              />
            </Chart>
          </div>
      </div>
    );
  }
}

export default WelcomeView;

I think I followed everything correctly so I am not sure what I am doing wrong.

UPDATE :

If I dynamically add another SVG element above the chart element, for example a circle :

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Then the circle appears, and magically the adding of the SVG element kickstarted the rendering process for the charts.

Very confused why this would be happening :(

Did you find a solution to this problem? – Dehan Jun 25 '17 at 16:01 — Dehan, Jun 25 '17 at 16:01
no, I ended up switching to recharts :) – Oliver Watkins Jun 25 '17 at 16:04 — Oliver Watkins, Jun 25 '17 at 16:04

Kellen Preston · Answer 1 · 2017-07-17T19:33:29.233

I followed the same steps and initially couldn't get it to display either.

However what I did notice is that in the sample code they list from gitHub they didn't nest LineChart inside Chart (as they do in the instructions). Once I removed the encompassing 'Chart' my graph appeared.

return (
      <LineChart
        //showXGrid={false}
        //showYGrid={false}
        margins= {margins}
        title={title}
        data={chartData}
        width={width}
        height={height}
        chartSeries={chartSeries}
        x={x}
      />
    );

React-d3 Chart Not Showing

1 Answers1