wui-bigdata/dist-modules/BundleDiagram.js

Big data visualization library for WUI framework.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _d = require('d3');

var _d2 = _interopRequireDefault(_d);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var BundleDiagram = function (_Component) {
  _inherits(BundleDiagram, _Component);

  function BundleDiagram() {
    _classCallCheck(this, BundleDiagram);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(BundleDiagram).apply(this, arguments));
  }

  _createClass(BundleDiagram, [{
    key: 'render',
    value: function render() {
      var width = 600;
      var height = 600;
      var cluster = _d2.default.layout.cluster().size([360, width / 2 - 50]).separation(function (a, b) {
        return (a.parent == b.parent ? 1 : 2) / a.depth;
      });
      var bundle = _d2.default.layout.bundle();
      var nodes = cluster.nodes(cities);

      function map(nodes, links) {
        var hash = [];

        for (var i = 0; i < nodes.length; i++) {
          hash[nodes[i].name] = nodes[i];
        }

        var resultLinks = [];

        for (var _i = 0; _i < links.length; _i++) {
          resultLinks.push({
            source: hash[links[_i].source],
            target: hash[links[_i].target]
          });
        }

        return resultLinks;
      }

      var oLinks = map(nodes, railway);
      var links = bundle(oLinks);
      var line = _d2.default.svg.line.radial().interpolate('bundle').tension(.85).radius(function (d) {
        return d.y;
      }).angle(function (d) {
        return d.x / 180 * Math.PI;
      });
      var color = _d2.default.scale.category20c();

      return _react2.default.createElement(
        'svg',
        { width: width, height: height },
        _react2.default.createElement(
          'g',
          { transform: 'translate(' + width / 2 + ', ' + height / 2 + ')' },
          links.map(function (link, index) {
            return _react2.default.createElement('path', { key: index,
              className: 'link',
              d: line(link) });
          }),
          nodes.filter(function (d) {
            return !d.children;
          }).map(function (node, index) {
            return _react2.default.createElement(
              'g',
              { key: index,
                className: 'node',
                transform: 'rotate(' + (node.x - 90) + ')translate(' + node.y + ')rotate(' + (90 - node.x) + ')' },
              _react2.default.createElement('circle', { r: 20, fill: color(index) }),
              _react2.default.createElement(
                'text',
                { dy: '.2em', textAnchor: 'middle' },
                node.name
              )
            );
          })
        )
      );
    }
  }]);

  return BundleDiagram;
}(_react.Component);

exports.default = BundleDiagram;


var cities = {
  name: '',
  children: [{ name: '北京' }, { name: '上海' }, { name: '杭州' }, { name: '广州' }, { name: '桂林' }, { name: '昆明' }, { name: '成都' }, { name: '西安' }, { name: '太原' }]
};

var railway = [{ source: '北京', target: '上海' }, { source: '北京', target: '广州' }, { source: '北京', target: '杭州' }, { source: '北京', target: '西安' }, { source: '北京', target: '成都' }, { source: '北京', target: '太原' }, { source: '北京', target: '桂林' }, { source: '北京', target: '昆明' }, { source: '北京', target: '成都' }, { source: '上海', target: '杭州' }, { source: '昆明', target: '成都' }, { source: '西安', target: '太原' }];