docs(brush): 刷选demo优化

examples/dynamic-plots/brush/demo/meta.json

@@ -5,19 +5,19 @@
   },
   "demos": [
     {
-      "filename": "scatter-brush.ts",
+      "filename": "scatter-brush.jsx",
       "title": {
-        "zh": "散点图刷选",
-        "en": "Brush of scatter"
+        "zh": "散点图刷选高亮",
+        "en": "Brush highlight of scatter"
       },
       "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/BlpX0yZrRH/brush-highlight.gif"
     },
     {
-      "filename": "scatter-brush-x.ts",
+      "filename": "scatter-brush-filter.ts",
       "title": {
-        "zh": "散点图 x 方向刷选",
-        "en": "Brush on x position of scatter"
+        "zh": "散点图刷选",
+        "en": "Brush of scatter"
       },
       "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/x6%24CDJpPny/brush-x.gif"

examples/dynamic-plots/brush/demo/scatter-brush-x.ts → examples/dynamic-plots/brush/demo/scatter-brush-filter.ts

@@ -15,8 +15,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json')
       },
       brush: {
         enabled: true,
-        // 圈选类型，默认: 'rect', 也可以设置 'y-rect', 'circle', 'path'
-        type: 'x-rect',
         mask: {
           style: {
             fill: 'rgba(255,0,0,0.15)',

examples/dynamic-plots/brush/demo/scatter-brush.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Select } from 'antd';
+import { Scatter } from '@antv/g2plot';
+import insertCss from 'insert-css';
+
+class Plot extends React.Component {
+  chartNodeRef = React.createRef();
+  chartRef = React.createRef();
+
+  componentDidMount() {
+    const chartDom = this.chartNodeRef.current;
+    const plot = new Scatter(chartDom, {
+      data: [],
+      xField: 'weight',
+      yField: 'height',
+      colorField: 'gender',
+      size: 5,
+      shape: 'circle',
+      pointStyle: {
+        fillOpacity: 1,
+      },
+      brush: {
+        enabled: true,
+        // 圈选高亮，不指定默认为: filter
+        action: 'highlight',
+        mask: {
+          style: {
+            fill: 'rgba(0,0,0,0.15)',
+            stroke: 'rgba(0,0,0,0.45)',
+            lineWidth: 0.5,
+          },
+        },
+      },
+    });
+
+    // Step 3: 渲染图表
+    plot.render();
+    this.chartRef.current = plot;
+
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json')
+      .then((res) => res.json())
+      .then((data) => {
+        plot.changeData(data);
+      });
+  }
+
+  handleChange = (v) => {
+    const plot = this.chartRef.current;
+    if (plot) {
+      plot.update({ brush: { type: v } });
+    }
+  };
+
+  render() {
+    return (
+      <section>
+        <div>
+          <span className="select-label">Brush 类型</span>
+          <Select aria-label="select" defaultValue="rect" onChange={this.handleChange} size="small">
+            {['rect', 'x-rect', 'y-rect', 'circle', 'path'].map((opt) => {
+              return <Select.Option value={opt}>{opt}</Select.Option>;
+            })}
+          </Select>
+        </div>
+        <div className={'chart-wrapper'} ref={this.chartNodeRef} />
+      </section>
+    );
+  }
+}
+
+// 我们用 insert-css 演示引入自定义样式
+// 推荐将样式添加到自己的样式文件中
+// 若拷贝官方代码，别忘了 npm install insert-css
+insertCss(`
+  .select-label {
+    margin-right: 8px;
+  }
+  .select-label:not(:first-of-type) {
+    margin-left: 8px;
+  }
+  .chart-wrapper {
+    margin-top: 12px;
+  }
+`);
+
+ReactDOM.render(<Plot />, document.getElementById('container'));