| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 |
|
| 4 | <head>
|
| 5 | <meta charset="UTF-8">
|
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 8 | <meta name="geometry" content="diagram">
|
| 9 | <link rel="stylesheet" href="./assets/common.css">
|
| 10 | <title>Scatter Matrix</title>
|
| 11 | </head>
|
| 12 |
|
| 13 | <body>
|
| 14 | <div id="toolbar">
|
| 15 | <button id="XY">矩形选择</button>
|
| 16 | <button id="X">横向选择</button>
|
| 17 | <button id="Y">纵向选择</button>
|
| 18 | <button id="POLYGON">圈选</button>
|
| 19 | <button id="clear">清除选择</button>
|
| 20 | </div>
|
| 21 | <div id="canvas"></div>
|
| 22 |
|
| 23 | <script src="./assets/jquery-3.2.1.min.js"></script>
|
| 24 | <script src="./assets/data-set.min.js"></script>
|
| 25 | <script src="./assets/g2.min.js"></script>
|
| 26 | <script src="../build/g2-brush.js"></script>
|
| 27 | <script>
|
| 28 | const Util = G2.Util;
|
| 29 | $.getJSON('./data/iris.json', function(data) {
|
| 30 | const chart = new G2.Chart({
|
| 31 | container: 'canvas',
|
| 32 | forceFit: true,
|
| 33 | height: window.innerHeight
|
| 34 | });
|
| 35 |
|
| 36 | chart.source(data, {
|
| 37 | Species: {
|
| 38 | sync: true
|
| 39 | }
|
| 40 | });
|
| 41 | chart.legend({
|
| 42 | hoverable: false
|
| 43 | });
|
| 44 | chart.facet('matrix', {
|
| 45 | fields: [ 'SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth' ],
|
| 46 | eachView(view, facet) {
|
| 47 | view.axis(facet.colField, {
|
| 48 | label: null,
|
| 49 | line: {
|
| 50 | lineWidth: 1,
|
| 51 | stroke: '#000'
|
| 52 | },
|
| 53 | tickLine: {
|
| 54 | lineWidth: 1,
|
| 55 | stroke: '#000',
|
| 56 | length: 4
|
| 57 | }
|
| 58 | });
|
| 59 | view.axis(facet.rowField, {
|
| 60 | label: null,
|
| 61 | line: {
|
| 62 | lineWidth: 1,
|
| 63 | stroke: '#000'
|
| 64 | },
|
| 65 | tickLine: {
|
| 66 | lineWidth: 1,
|
| 67 | stroke: '#000',
|
| 68 | length: 4
|
| 69 | }
|
| 70 | });
|
| 71 | if (facet.rowIndex === facet.colIndex) {
|
| 72 | view.point()
|
| 73 | .position(facet.colField + '*' + facet.colField)
|
| 74 | .color('Species', [ '#880000', '#008800', '#000088' ])
|
| 75 | .opacity(0.5)
|
| 76 | .shape('circle')
|
| 77 | .size(3)
|
| 78 | .active(false);
|
| 79 | } else {
|
| 80 | view.point()
|
| 81 | .position([ facet.colField, facet.rowField ])
|
| 82 | .color('Species', [ '#880000', '#008800', '#000088' ])
|
| 83 | .opacity(0.5)
|
| 84 | .shape('circle')
|
| 85 | .size(3)
|
| 86 | .active(false);
|
| 87 | }
|
| 88 | if ([ 0, 1, 2, 3 ].indexOf(facet.rowIndex) > -1 && facet.colIndex === 0) {
|
| 89 | view.guide().text({
|
| 90 | position: [ 3.7, 'median' ],
|
| 91 | content: facet.rowValue,
|
| 92 | style: {
|
| 93 | rotate: -90,
|
| 94 | fontSize: 12,
|
| 95 | fill: '#999',
|
| 96 | textAlign: 'center'
|
| 97 | }
|
| 98 | });
|
| 99 | }
|
| 100 | if ([ 0, 1, 2, 3 ].indexOf(facet.colIndex) > -1 && facet.rowIndex === 3) {
|
| 101 | view.guide().text({
|
| 102 | position: [ 'median', 'min' ],
|
| 103 | content: facet.colValue,
|
| 104 | style: {
|
| 105 | fontSize: 12,
|
| 106 | fill: '#999',
|
| 107 | textAlign: 'center'
|
| 108 | },
|
| 109 | offsetY: 20
|
| 110 | });
|
| 111 | }
|
| 112 | }
|
| 113 | });
|
| 114 | chart.render();
|
| 115 |
|
| 116 | let brush;
|
| 117 | function setBrushType(type) {
|
| 118 | if (!brush) {
|
| 119 | brush = new Brush({
|
| 120 | canvas: chart.get('canvas'),
|
| 121 | dragable: true,
|
| 122 | type,
|
| 123 | onBrushstart(ev) {
|
| 124 | chart.hideTooltip();
|
| 125 | const { x, y } = ev;
|
| 126 | const views = chart.getViewsByPoint({ x, y });
|
| 127 | if (views.length > 1) {
|
| 128 | this.chart = views[1];
|
| 129 | const coord = views[1].get('coord');
|
| 130 | this.plot = {
|
| 131 | start: coord.start,
|
| 132 | end: coord.end
|
| 133 | };
|
| 134 | this.xScale = views[1].getXScale();
|
| 135 | this.yScale = views[1].getYScales()[0];
|
| 136 | }
|
| 137 | },
|
| 138 | onBrushmove(ev) {
|
| 139 | chart.hideTooltip();
|
| 140 |
|
| 141 | const { data } = ev;
|
| 142 | chart.eachShape((record, shape) => {
|
| 143 | if (!shape.get('_originAttrs')) {
|
| 144 | shape.set('_originAttrs', Util.cloneDeep(shape.__attrs));
|
| 145 | }
|
| 146 | if (data.indexOf(record) === -1) {
|
| 147 | shape.attr('fill', '#ccc');
|
| 148 | } else {
|
| 149 | const originAttrs = shape.get('_originAttrs');
|
| 150 | shape.__attrs = Util.cloneDeep(originAttrs);
|
| 151 | }
|
| 152 | });
|
| 153 | },
|
| 154 | onDragmove(ev) {
|
| 155 | chart.hideTooltip();
|
| 156 |
|
| 157 | const { data } = ev;
|
| 158 | chart.eachShape((record, shape) => {
|
| 159 | if (!shape.get('_originAttrs')) {
|
| 160 | shape.set('_originAttrs', Util.cloneDeep(shape.__attrs));
|
| 161 | }
|
| 162 | if (data.indexOf(record) === -1) {
|
| 163 | shape.attr('fill', '#ccc');
|
| 164 | } else {
|
| 165 | const originAttrs = shape.get('_originAttrs');
|
| 166 | shape.__attrs = Util.cloneDeep(originAttrs);
|
| 167 | }
|
| 168 | });
|
| 169 | }
|
| 170 | });
|
| 171 | } else {
|
| 172 | if (type === 'clear') {
|
| 173 | brush.container.clear();
|
| 174 |
|
| 175 | } else {
|
| 176 | brush.setType(type);
|
| 177 |
|
| 178 | }
|
| 179 | }
|
| 180 | }
|
| 181 |
|
| 182 | $('#XY').click(() => {
|
| 183 | setBrushType('XY');
|
| 184 | });
|
| 185 | $('#Y').click(() => {
|
| 186 | setBrushType('Y');
|
| 187 | });
|
| 188 | $('#X').click(() => {
|
| 189 | setBrushType('X');
|
| 190 | });
|
| 191 | $('#POLYGON').click(() => {
|
| 192 | setBrushType('POLYGON');
|
| 193 | });
|
| 194 | $('#clear').click(() => {
|
| 195 | setBrushType('clear');
|
| 196 |
|
| 197 | chart.eachShape((record, shape) => {
|
| 198 | if (shape.get('_originAttrs')) {
|
| 199 | const originAttrs = shape.get('_originAttrs');
|
| 200 | shape.__attrs = Util.cloneDeep(originAttrs);
|
| 201 | }
|
| 202 | });
|
| 203 | });
|
| 204 | });
|
| 205 | </script>
|
| 206 | </body>
|
| 207 |
|
| 208 | </html>
|
| 209 |
|