Question

我在Rails 5中使用React渲染D3折线图时遇到困难。这些是错误：

我已使用外部源将d3导入到Rails应用程序中：

<script src="https://d3js.org/d3.v5.min.js"></script>

application.html

<html>
  <head>
    <%= csrf_meta_tags %>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %> 
  </head>

  <body>
    <div class="container">
      <%= react_component("HelloWorld", {greeting: "Hello"}) %> 
      <%= react_component("RenderLineChart") %>
      <%= yield %>
    </div>
  </body>
</html>

将呈现“ HelloWorld”组件，这意味着webpack安装没有任何问题。我实际上是在遵循this教程，但是将其自定义为react-rails框架。

结构：

  app/
    javascript/
      components/
        RenderLineChart.js
        LineSeries.js
        DataSeries.js
        Line.js
      packs/
        application.js
        service_rendering.js

RenderLineChart.js

import React, { Component } from 'react';
import PropTypes from "prop-types";
import LineChart from './LineSeries';

const data = {
        points: [
          [ { x: 0, y: 20 }, { x: 1, y: 30 }, { x: 2, y: 10 }, { x: 3, y: 5 },
            { x: 4, y: 8 }, { x: 5, y: 15 }, { x: 6, y: 10 } ]
          ,
          [ { x: 0, y: 8 }, { x: 1, y: 5 }, { x: 2, y: 20 }, { x: 3, y: 12 },
            { x: 4, y: 4 }, { x: 5, y: 6 }, { x: 6, y: 2 } ]
          ,
          [ { x: 0, y: 0 }, { x: 1, y: 5 }, { x: 2, y: 8 }, { x: 3, y: 2 },
            { x: 4, y: 6 }, { x: 5, y: 4 }, { x: 6, y: 2 } ]
          ],
        xValues: [0,1,2,3,4,5,6],
        yMin: 0,
        yMax: 30
      };

class RenderLineChart extends React.Component {

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Porfolio</h2>
        <LineChart
          data={data}
          width={600}
          height={300}
        />
      </div>
    );
  }
}

export default RenderLineChart;

LineSeries.js

import React, { Component } from 'react';
import PropTypes from "prop-types"
import DataSeries from './DataSeries';

const LineChart = React.createClass({

  propTypes: {
    width:  React.PropTypes.number,
    height: React.PropTypes.number,
    data:   React.PropTypes.object.isRequired
  },

  getDefaultProps(){
    return {
      width:  600,
      height: 300
    }
  },

  render() {
    let { width, height, data } = this.props;

    let xScale = d3.scale.ordinal()
                   .domain(data.xValues)
                   .rangePoints([0, width]);

    let yScale = d3.scale.linear()
                   .range([height, 10])
                   .domain([data.yMin, data.yMax]);

    console.log(this.props.data);

    return (
      <svg width={width} height={height}>
          <DataSeries
            xScale={xScale}
            yScale={yScale}
            data={data}
            width={width}
            height={height}
            />
      </svg>
    );
  }

});

export default LineChart;

DataSeries.js

import React, { Component } from 'react';
import PropTypes from "prop-types"
import Line from './Line';

const DataSeries = React.createClass({

  propTypes: {
    colors:             React.PropTypes.func,
    data:               React.PropTypes.object,
    interpolationType:  React.PropTypes.string,
    xScale:             React.PropTypes.func,
    yScale:             React.PropTypes.func
  },

  getDefaultProps() {
    return {
      data:               [],
      interpolationType:  'cardinal',
      colors:             d3.scale.category10()
    };
  },

  render() {
    let { data, colors, xScale, yScale, interpolationType } = this.props;

    let line = d3.svg.line()
      .interpolate(interpolationType)
      .x((d) => { return xScale(d.x); })
      .y((d) => { return yScale(d.y); });

    let lines = data.points.map((series, id) => {
      return (
        <Line
          path={line(series)}
          stroke={colors(id)}
          key={id}
          />
      );
    });

    return (
      <g>
        <g>{lines}</g>
      </g>
    );
  }

});


export default DataSeries;

React + Rails 5 + D3：图表未呈现

0 个答案: