Question

我正在尝试使用VS2017中提供的React_Redux模板使用dc.js构建图表。我为此创建了一个单独的组件（SeriesChart.tsx），并在组件的componentDidMount（）方法中添加了特定于代码的图表。以下是SeriesChart.tsx的代码

    // A '.tsx' file enables JSX support in the TypeScript compiler, 
// for more information see the following page on the TypeScript wiki:
// https://github.com/Microsoft/TypeScript/wiki/JSX

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as CounterStore from '../store/Counter';
import * as WeatherForecasts from '../store/WeatherForecasts';

import * as d3 from 'd3';
import * as dc from 'dc';
import * as crossfilter from 'crossfilter';
import { scaleTime, scaleLinear } from 'd3-scale';
import * as d3Time from 'd3-time-format';

export class SeriesChart extends React.Component<{}, {}> {

    componentDidMount() {
        var chart = dc.seriesChart("lineChart");

        var data =  [
  {
    "Time": "19-Jan-2018 11:24:49.000 UTC",
    "Speed": 0.634
  },
  {
    "Time": "19-Jan-2018 11:24:52.000 UTC",
    "Speed": 1.435
  },
  {
    "Time": "19-Jan-2018 11:24:53.000 UTC",
    "Speed": 0.789
  },
  {
    "Time": "19-Jan-2018 11:24:54.000 UTC",
    "Speed": 1.876
  }
];

        var mycrossfilter = crossfilter(data);

        //var format = d3.time.format("%Y,%m,%d,%H,%M,%S");
        var formatTime = d3Time.timeParse("%Y,%m,%d,%H,%M,%S");

        data.forEach(function (d) {
            var newDate = new Date(d.Time);
            var stringDate = "" + newDate.getFullYear() + "," + newDate.getMonth() + "," + newDate.getDate() + "," + newDate.getHours() + "," + newDate.getMinutes() + "," + newDate.getSeconds() + "";
            var formattedString = formatTime(stringDate);
            d.Time = formattedString.toLocaleString();
        });

        var dateDim = mycrossfilter.dimension(function (d) { return [d.Time, d.Speed] });

        var minDate = dateDim.bottom(1)[0].Time;
        var maxDate = dateDim.top(1)[0].Time;

        var minDateInDate = new Date(minDate);
        var maxDateInDate = new Date(maxDate);

        var minSpeed = dateDim.bottom(1)[0].Speed;
        var maxSpeed = dateDim.top(1)[0].Speed;

        var group = dateDim.group().reduceCount();

        chart
            .width(650)
            .height(350)
            .dimension(dateDim)
            .x(scaleTime().domain([minDateInDate, maxDateInDate]))
            .y(scaleLinear().domain([1.8, maxSpeed]))
            .renderlet(function (chart) {
                chart.selectAll("circle")
                    .style("fill", "grey")
                    .style("fill-opacity", 1)
                    .on("mousemove", null)
                    .on("mouseout", null)                     
            })
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .group(group)
            .xAxisLabel("Time")
            .yAxisLabel("EngineSpeed")
            .brushOn(false)
            .seriesAccessor(
            function (d) {
                return d.value;
            })
            .keyAccessor(function (d) {
                return d.key[0];
            })
            .valueAccessor(function (d) {
                return d.key[1];
            })
            .ordinalColors(['blue']);

        //chart.xAxis();
        chart.render();

    }

    public render() {
        return <div >
        </div>;
    }
}

现在我想知道如何在组件的render（）方法中渲染此图表，以便正确呈现图表。在简单的html语法中，我们以下列方式定义元素。

<div id = "lineChart"></div>

这将是seriesChart（）函数的输入，如下所示。

var chart = dc.seriesChart('#lineChart');

但在我的情况下，我不知道如何在react组件中建立该连接（在componentdidMount（）和render（）方法之间）。

有人可以帮忙。

如何在VS2017 React + Redux模板中渲染图表？

0 个答案: