C3.js 与 React.js 集成以获取实时数据

Question

我正在研究 c3.js 与 reactjs 的集成，以获取来自服务器端事件的实时数据。这是我到目前为止所拥有的：

https://jsfiddle.net/69z2wepo/15384/

C3js 具有流 API，可用于为新传入数据渲染部分图形 (http://c3js.org/samples/api_flow.html)。

但是我相信使用该 API 实际上会直接操作 DOM，而不是使用 react 的虚拟 DOM 概念。任何可能的解决方法的想法/建议。

我查看了现有的 NPM 模块，但找不到可以支持该用例的模块。

实际上，我想将图形从一个转换为另一个（通过 C3 API 得到很好的支持）。 C3 js 基于 d3 js。我知道 d3 js 与 react 绑定要好得多，但我需要通过 C3 更好地获得。

另外，在当前代码中，我使用的是bindto: '#chart_1',，它再次直接操作 DOM。我认为这不是渲染图形的最佳方式。对此的任何想法也值得赞赏。

代码：

var getDataFromStores = function() {  
  return [{
            "proxy" : "10.0.1.15:1211",
            "url" : "http://www.google.com/in/test",
            "host" : "http://www.google.com/",
            "time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime" : 200,
            "pageSize" : 332 
            },{
                "proxy" : "10.0.1.15:1212",
                "url" : "http://www.google.com/in/try",
                "host" : "http://www.google.com/",
                "time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
                "useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
                "responsetime" : 100,
                "pageSize" : 200 
            },{
                "proxy" : "10.0.1.15:1213",
                "url" : "http://www.google.com/in/demo",
                "host" : "http://www.google.com/",
                "time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
                "useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
                "responsetime" : 333,
                "pageSize" : 500 

        }];
};


var Chart = React.createClass({  
  getInitialState: function(){
    var state = {
        data : {
            json : getDataFromStores(),
                type : 'line',
                keys : {
                        x: 'url',
                        value: ['proxy', 'url','host','time','responsetime',"pageSize","useragent"]
                    }
        },
        axis : {
            x: {
                type: 'category'
            }
        }
    };
    return state;
  },
  componentDidMount: function(){
    this._renderChart(this.state);
  },
  _renderChart: function(state){
        var lineChart = c3.generate({
        bindto: '#chart_1',
        data: state.data,
        axis: state.axis
    })
  },
  render: function() {
    this._renderChart(this.state);
    return (
      <div id="container">
        <div id="chart_1"></div>
      </div>
    );
  }
});

React.render(<Chart />, document.body);

Answer 1

我在 Reactjs 中使用 c3 的方法是将数据作为属性传入，并使用 componentDidUpdate 更新图表。这是一个例子。 id 的东西是可以用 this.getDOMNode() 重构的 hack

var GaugeChart = React.createClass({
  propTypes: {
    limit: React.PropTypes.number,
    balance: React.PropTypes.number
  },
  getInitialState: function() {
    return({ id: "" });
  },
  getUUID: function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
  },

  renderChart: function() {
    var id = this.state.id;
    var width = 40;
    var self = this;
    (function() {
        self.chart = c3.generate({
        bindto: "#"+self.state.id,
        data: {
          columns: [
            ['Balance', parseFloat(self.props.balance)]
          ],
          type: 'gauge',

        },
        color: {
          pattern: ['#1ca2b8', '#1ca2b8', '#1ca2b8', '#1ca2b8'],
          threshold: {
            values: [30, 60, 90, 100]
          }
        },
        gauge: {
          max: this.props.limit,
          label: {
            format: function (value, ratio) {
              return "$" + value;
            }
          },
          width: width
        },
        tooltip: {
            show: false
        },
        padding: {
          bottom: 20
        }
      });
    })();
    this.update();
  },

  update: function() {
    if (this.chart) {
      this.chart.internal.config.gauge_max = this.props.limit;
      this.chart.load({
          columns: [['Balance', this.props.balance]]
      });
    }
  },

  componentDidMount: function() {
    // hacky way (?) to ensure this always gets it's own id that lasts through the component
    this.setState({id: "gauge-chart-"+this.getUUID()}, this.renderChart);
    $(this.getDOMNode()).on( "resize", this.update );
  },

  componentDidUpdate: function(prevProps, prevState) {
    this.update();
  },

  componentDidDismount: function() {
    $(this.getDOMNode()).off( "resize", this.update );
  },

  render: function() {
    var container = <div id={this.state.id} ></div>
    return container;
  }
});

module.exports = GaugeChart;

希望这会有所帮助，这种方法也可用于在容器大小发生变化时调整图表大小。

要连接到实时数据源，您可能必须使用 websockets，我推荐使用 Socket.io。