Simple chord

src/chart/chord.js

+define(function (require) {
+
+    require('./chord/ChordSeries');
+    require('./chord/ChordView');
+
+    var echarts = require('../echarts');
+    var zrUtil = require('zrender/core/util');
+    echarts.registerLayout(require('./chord/chordCircularLayout'));
+
+    echarts.registerVisualCoding(
+        'chart',  zrUtil.curry(require('../visual/dataColor'), 'chord')
+    );
+
+    echarts.registerProcessor(
+        'filter', zrUtil.curry(require('../processor/dataFilter'), 'pie')
+    );
+});
\ No newline at end of file

src/chart/chord/ChordSeries.js

+define(function (require) {
+
+    var SeriesModel = require('../../model/Series');
+    var createGraphFromNodeEdge = require('../helper/createGraphFromNodeEdge');
+    var createGraphFromNodeMatrix = require('../helper/createGraphFromNodeMatrix');
+
+    var ChordSeries = SeriesModel.extend({
+
+        type: 'series.chord',
+
+        getInitialData: function (option) {
+            var edges = option.edges || option.links;
+            var nodes = option.data || option.nodes;
+            var matrix = option.matrix;
+            if (nodes && edges) {
+                var graph = createGraphFromNodeEdge(nodes, edges, this, true);
+                return graph.data;
+            }
+            else if (nodes && matrix) {
+                var graph = createGraphFromNodeMatrix(nodes, matrix, this, true);
+                return graph.data;
+            }
+        },
+
+        /**
+         * @return {module:echarts/data/Graph}
+         */
+        getGraph: function () {
+            return this.getData().graph;
+        },
+
+        /**
+         * @return {module:echarts/data/List}
+         */
+        getEdgeData: function () {
+            return this.getGraph().edgeData;
+        },
+
+        defaultOption: {
+            center: ['50%', '50%'],
+            radius: ['65%', '75%'],
+            // x2: null,
+            // y2: null
+            //
+            // layout: 'circular',
+
+            sort: 'none',
+            sortSub: 'none',
+            padding: 0.02,
+            startAngle: 90,
+            clockwise: true,
+
+            itemStyle: {
+                normal: {},
+                emphasis: {}
+            },
+
+            chordStyle: {
+                normal: {},
+                emphasis: {}
+            }
+        }
+    });
+
+    return ChordSeries;
+});
\ No newline at end of file

src/chart/chord/ChordView.js

+define(function (require) {
+
+    var RibbonPath = require('./Ribbon');
+    var graphic = require('../../util/graphic');
+
+    return require('../../echarts').extendChartView({
+
+        type: 'chord',
+
+        init: function (option) {
+
+        },
+
+        render: function (seriesModel, ecModel, api) {
+            var data = seriesModel.getData();
+            var graph = seriesModel.getGraph();
+            var edgeData = seriesModel.getEdgeData();
+
+            var group = this.group;
+            group.removeAll();
+
+            data.each(function (idx) {
+                var layout = data.getItemLayout(idx);
+                var sector = new graphic.Sector({
+                    shape: {
+                        cx: layout.cx,
+                        cy: layout.cy,
+                        clockwise: layout.clockwise,
+                        r0: layout.r0,
+                        r: layout.r,
+                        startAngle: layout.startAngle,
+                        endAngle: layout.endAngle
+                    }
+                });
+
+                sector.setStyle({
+                    fill: data.getItemVisual(idx, 'color')
+                });
+
+                data.setItemLayout(idx);
+                group.add(sector);
+            });
+
+            var edgeRendered = {};
+            edgeData.each(function (idx) {
+                if (edgeRendered[idx]) {
+                    return;
+                }
+                var layout = edgeData.getItemLayout(idx);
+                var edge = graph.getEdgeByIndex(idx);
+                var otherEdge = graph.getEdge(edge.node2, edge.node1);
+                var otherEdgeLayout = otherEdge.getLayout();
+                edgeRendered[idx] = edgeRendered[otherEdge.dataIndex] = true;
+                var ribbon = new RibbonPath({
+                    shape: {
+                        cx: layout.cx,
+                        cy: layout.cy,
+                        r: layout.r,
+                        s0: layout.startAngle,
+                        s1: layout.endAngle,
+                        t0: otherEdgeLayout.startAngle,
+                        t1: otherEdgeLayout.endAngle,
+                        clockwise: layout.clockwise
+                    }
+                });
+                ribbon.setStyle({
+                    // Use color of source
+                    fill: edge.node1.getVisual('color'),
+                    opacity: 0.5
+                });
+                group.add(ribbon);
+            });
+        }
+    });
+});
\ No newline at end of file

src/chart/chord/Ribbon.js

+define(function (require) {
+
+    var sin = Math.sin;
+    var cos = Math.cos;
+
+    return require('../../util/graphic').extendShape({
+
+        type: 'ec-ribbon',
+
+        shape: {
+            cx: 0,
+            cy: 0,
+            r: 0,
+            s0: 0,
+            s1: 0,
+            t0: 0,
+            t1: 0
+        },
+
+        style: {
+            fill: '#000'
+        },
+
+        buildPath: function (ctx, shape) {
+
+            var clockwise = shape.clockwise || false;
+
+            var cx = shape.cx;
+            var cy = shape.cy;
+            var r = shape.r;
+            var s0 = shape.s0;
+            var s1 = shape.s1;
+            var t0 = shape.t0;
+            var t1 = shape.t1;
+            var sx0 = cx + cos(s0) * r;
+            var sy0 = cy + sin(s0) * r;
+            var sx1 = cx + cos(s1) * r;
+            var sy1 = cy + sin(s1) * r;
+            var tx0 = cx + cos(t0) * r;
+            var ty0 = cy + sin(t0) * r;
+            var tx1 = cx + cos(t1) * r;
+            var ty1 = cy + sin(t1) * r;
+
+            ctx.moveTo(sx0, sy0);
+            ctx.arc(cx, cy, shape.r, s0, s1, !clockwise);
+            ctx.bezierCurveTo(
+                (cx - sx1) * 0.70 + sx1,
+                (cy - sy1) * 0.70 + sy1,
+                (cx - tx0) * 0.70 + tx0,
+                (cy - ty0) * 0.70 + ty0,
+                tx0, ty0
+            );
+            // Chord to self
+            if (shape.s0 === shape.t0 && shape.s1 === shape.t1) {
+                return;
+            }
+            ctx.arc(cx, cy, shape.r, t0, t1, !clockwise);
+            ctx.bezierCurveTo(
+                (cx - tx1) * 0.70 + tx1,
+                (cy - ty1) * 0.70 + ty1,
+                (cx - sx0) * 0.70 + sx0,
+                (cy - sy0) * 0.70 + sy0,
+                sx0, sy0
+            );
+        }
+    });
+});
\ No newline at end of file

src/chart/chord/chordCircularLayout.js

+/**
+ * Chord layout
+ * @module echarts/chart/chord/chordCircularLayout
+ * @author pissang(http://github.com/pissang)
+ */
+define(function (require) {
+    var zrUtil = require('zrender/core/util');
+    var numberUtil = require('../../util/number');
+    /**
+     * @param {module:echarts/data/Graph} graph
+     */
+    function layout(graphs, opts) {
+        if (!zrUtil.isArray(graphs)) {
+            graphs = [graphs];
+        }
+
+        var graph0 = graphs[0];
+
+        var groups = [];
+
+        // Init groups
+        graph0.eachNode(function (node) {
+            var group = {
+                size: 0,
+                subGroups: [],
+                node: node
+            };
+            groups.push(group);
+        });
+
+        zrUtil.each(graphs, function (graph) {
+            graph.eachEdge(function (edge) {
+                var g1 = groups[edge.node1.dataIndex];
+                g1.size += edge.getValue('value') || 0;
+
+                g1.subGroups.push({
+                    size: edge.getValue('value'),
+                    edge: edge
+                });
+            });
+        });
+
+        var sumSize = zrUtil.reduce(groups, function (sumSize, group) {
+            return sumSize + group.size;
+        }, 0);
+
+        if (opts.sort && opts.sort != 'none') {
+            groups.sort(compareGroups);
+            if (opts.sort === 'descending') {
+                groups.revert();
+            }
+        }
+
+        var unitAngle = (Math.PI * 2 - opts.padding * graph0.data.count()) / sumSize;
+        var angle = opts.startAngle * Math.PI / 180;
+        var sign = opts.clockwise ? -1 : 1;
+        zrUtil.each(groups, function (group) {
+            if (opts.sortSub && opts.sortSub != 'none') {
+                group.subGroups.sort(compareGroups);
+                if (opts.sortSub === 'descending') {
+                    group.subGroups.revert();
+                }
+            }
+
+            var endAngle = angle + sign * group.size * unitAngle;
+            group.node.setLayout({
+                startAngle: -angle,
+                endAngle: -endAngle,
+                cx: opts.cx,
+                cy: opts.cy,
+                r0: opts.r0,
+                r: opts.r,
+                clockwise: opts.clockwise
+            });
+            zrUtil.each(group.subGroups, function (subGroup) {
+                var startAngle = angle;
+                var endAngle = angle + sign * subGroup.size * unitAngle;
+                var layout = subGroup.edge.getLayout() || {
+                    cx: opts.cx,
+                    cy: opts.cy,
+                    r: opts.r0,
+                    clockwise: opts.clockwise
+                };
+                layout.startAngle = -startAngle;
+                layout.endAngle = -endAngle;
+                subGroup.edge.setLayout(layout);
+                angle = endAngle;
+            });
+
+            angle = endAngle + sign * opts.padding;
+        });
+    }
+
+    var compareGroups = function (a, b) {
+        return a.size - b.size;
+    };
+
+    return function (ecModel, api) {
+        ecModel.eachSeriesByType('chord', function (chordSeries) {
+            var graph = chordSeries.getGraph();
+
+            var center = chordSeries.get('center');
+            var radius = chordSeries.get('radius');
+
+            var parsePercent = numberUtil.parsePercent;
+            var viewWidth = api.getWidth();
+            var viewHeight = api.getHeight();
+            var viewSize = Math.min(viewWidth, viewHeight) / 2;
+
+            layout(graph, {
+                sort: chordSeries.get('sort'),
+                sortSub: chordSeries.get('sortSub'),
+                padding: chordSeries.get('padding'),
+                startAngle: chordSeries.get('startAngle'),
+                clockwise: chordSeries.get('clockwise'),
+                cx: parsePercent(center[0], viewWidth),
+                cy: parsePercent(center[1], viewHeight),
+                r0: parsePercent(radius[0], viewSize),
+                r: parsePercent(radius[1], viewSize)
+            });
+        });
+    };
+});
\ No newline at end of file

src/chart/helper/createGraphFromNodeEdge.js

@@ -26,15 +26,6 @@ define(function (require) {
             }
         }
 
-        // If edge has sourceValue and targetValue
-        // graph.eachEdge(function (edge, idx) {
-        //     var edgeRawData = edges[i];
-        //     if (edgeRawData.sourceValue != null && edgeRawData.targetValue != null) {
-
-        //     }
-        // });
-
-
         // FIXME
         var dimensionNames = completeDimensions(['value'], nodes);
 

src/chart/helper/createGraphFromNodeMatrix.js

+define(function (require) {
+
+    var List = require('../../data/List');
+    var Graph = require('../../data/Graph');
+    var linkList = require('../../data/helper/linkList');
+    var completeDimensions = require('../../data/helper/completeDimensions');
+    var zrUtil = require('zrender/core/util');
+
+    /**
+     * 从邻接矩阵生成
+     * ```
+     *        TARGET
+     *    -1--2--3--4--5-
+     *  1| x  x  x  x  x
+     *  2| x  x  x  x  x
+     *  3| x  x  x  x  x  SOURCE
+     *  4| x  x  x  x  x
+     *  5| x  x  x  x  x
+     * ```
+     *
+     * @param {Array.<Object>} nodes 节点信息
+     * @param {Array} matrix 邻接矩阵
+     * @param {module:echarts/model/Series}
+     * @param {boolean} directed 是否是有向图
+     * @return {module:echarts/data/Graph}
+     */
+    return function (nodes, matrix, hostModel, directed) {
+        var graph = new Graph(directed);
+        for (var i = 0; i < nodes.length; i++) {
+            graph.addNode(zrUtil.retrieve(
+                // Id, name, dataIndex
+                nodes[i].id, nodes[i].name, i
+            ), i);
+        }
+
+        var size = matrix.length;
+        var links = [];
+        var linkCount = 0;
+        for (var i = 0; i < size; i++) {
+            for (var j = 0; j < size; j++) {
+                var val = matrix[i][j];
+                if (val === 0) {
+                    continue;
+                }
+                var n1 = graph.nodes[i];
+                var n2 = graph.nodes[j];
+                var edge = graph.addEdge(n1, n2, linkCount);
+                if (edge) {
+                    linkCount++;
+                    links.push({
+                        value: val
+                    });
+                }
+            }
+        }
+
+        // FIXME
+        var dimensionNames = completeDimensions(['value'], nodes);
+
+        var nodeData = new List(dimensionNames, hostModel);
+        var edgeData = new List(['value'], hostModel);
+
+        nodeData.initData(nodes);
+        edgeData.initData(links);
+
+        graph.setEdgeData(edgeData);
+
+        linkList.linkToGraph(nodeData, graph);
+        // Update dataIndex of nodes and edges because invalid edge may be removed
+        graph.update();
+
+        return graph;
+    };
+});
\ No newline at end of file

src/util/model.js

 define(function(require) {
 
     var formatUtil = require('../util/format');
-    var addCommas = formatUtil.addCommas;
+    // var addCommas = formatUtil.addCommas;
     var Model = require('../model/Model');
 
     var zrUtil = require('zrender/core/util');

test/chord.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/facePrint.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="info"></div>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/chord',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'));
+                chart.setOption({
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'line'
+                        }
+                    },
+                    series: [{
+                        name: 'chord',
+                        type: 'chord',
+                        sort: 'ascending',
+                        data : [
+                            {name : 'group1'},
+                            {name : 'group2'},
+                            {name : 'group3'},
+                            {name : 'group4'}
+                        ],
+                        matrix: [
+                            [11975,  5871, 8916, 2868],
+                            [ 1951, 10048, 2060, 6171],
+                            [ 8010, 16145, 8090, 8045],
+                            [ 1013,   990,  940, 6907]
+                        ]
+                    }]
+                });
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file