我使用react d3基本条形图。 但出现了一些错误-错误： <rect> 属性y：预期长度，“ NaN”

Question

I use a d3 bar chart with react.js I use a code from http://www.reactd3.org/docs/basic/ Graph appears with wrong and have some errors. Code is here

import React from 'react';
import ReactDOM from 'react-dom';
import {Chart} from 'react-d3-core';
import {BarChart} from 'react-d3-basic';

class StatusChannelChart extends React.Component{
    render() {
        var generalChartData = [
          {"A": "0.08167"},
          {"B": "0.01492"},
          {"C": "0.02782"},
          {"D": "0.04253"},
          {"E": "0.12702"},
          {"F": "0.02288"},
          {"G": "0.02015"},
          {"H": "0.06094"},
          {"I": "0.06966"},
          {"J": "0.00153"}
          ];

        console.log(generalChartData);
        var width = 700,
        height = 400,
        title = "Bar Chart",
        chartSeries = [
          {
            field: 'frequency',
            name: 'Frequency'
          }
        ],
        x = function(d) {
          return d.letter;
        },
        xScale = 'ordinal',
        xLabel = "Letter",
        yLabel = "Frequency",
        yTicks = [10, "%"];

         return (
            <BarChart
            title= {title}
            data= {generalChartData}
            width= {400}
            height= {300}
            chartSeries = {chartSeries}
            x= {x}
            xLabel= {xLabel}
            xScale= {xScale}
            yTicks= {yTicks}
            yLabel = {yLabel}
          />
            )
        }
    }

export default StatusChannelChart;

Grape appears but wrong like this

I got some error like this

My package.json

    {
  "name": "Dashboard",
  "version": "0.1.4",
  "description": "Reporting Dashboard",
  "author": "Victoria",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --progress",
    "build": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors"
  },
  "devDependencies": {
    "babel-core": "~6.7.*",
    "babel-loader": "~6.2.*",
    "babel-preset-es2015": "~6.6.*",
    "babel-preset-react": "~6.5.*",
    "css-loader": "^0.23.1",
    "react-sidenav": "^1.0.4",
    "style-loader": "^0.13.1",
    "webpack": "~1.12.*",
    "webpack-dev-server": "~1.14.*"
  },
  "dependencies": {
    "chart.js": "^1.1.1",
    "dsv-loader": "^1.1.0",
    "json-loader": "^0.5.4",
    "react": "^15.3.1",
    "react-bootstrap": "^0.30.3",
    "react-chartjs": "^0.8.0",
    "react-d3-basic": "^1.6.11",
    "react-dom": "^15.3.1",
    "react-router": "^2.7.0"
  }
}

Answer 1

Change your generalChartData from this:

var generalChartData = [
      {"A": "0.08167"},
      {"B": "0.01492"},
      {"C": "0.02782"},
      {"D": "0.04253"},
      {"E": "0.12702"},
      {"F": "0.02288"},
      {"G": "0.02015"},
      {"H": "0.06094"},
      {"I": "0.06966"},
      {"J": "0.00153"}
  ];

To this:

 var generalChartData = [
      {letter: "A", frequency: 0.08167},
      {letter: "B", frequency: 0.01492},
      {letter: "C", frequency: 0.02782},
      ...
      {letter: "J", frequency: 0.00153}
  ];