How to use the @antv/data-set.View function in @antv/data-set

it('Axis grid `alternateColor` has gaps when field is `category`', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const data = [
      { country: '中国', population: 131744 },
      { country: '印度', population: 104970 },
      { country: '美国', population: 29034 },
      { country: '印尼', population: 23489 },
      { country: '巴西', population: 18203 }
    ];
    const dv = new DataSet.View().source(data);
    dv.transform({
      type: 'sort',
      callback(a, b) { // 排序依据，和原生js的排序callback一致
        return a.population - b.population;
      }
    });
    const chart = new G2.Chart({
      container: div,
      padding: 80
    });
    chart.source(dv);
    // chart.coord('polar').reflect();
    // chart.coord('polar');
    // chart.coord().transpose();
    chart.axis('country', {
      label: {

$.getJSON('/assets/data/time-scatter.json', (sourceData) => {
      const dv = new DataSet.View().source(sourceData);
      dv.transform({
        type: 'map',
        callback: obj => {
          obj.exp_amo = obj.exp_amo * 1;
          return obj;
        }
      });
      this.$data.data = dv.rows;
    });
  },

const sourceData = [
		{item: '事例一', count: 40},
		{item: '事例二', count: 21},
		{item: '事例三', count: 17},
		{item: '事例四', count: 13},
		{item: '事例五', count: 9}
	];

	const scale = [{
		dataKey: 'percent',
		min: 0,
		formatter: '.0%',
	}];

	const dv = new DataSet.View().source(sourceData);
	dv.transform({
		type: 'percent',
		field: 'count',
		dimension: 'item',
		as: 'percent'
	});
	const data = dv.rows;

	export default {
		name: 'pieTem',
		data() {
			return {
				data,
				scale,
				height: 400,
				pieStyle: {

{ country: 'Africa', year: '1800', value: 107 },
    { country: 'Africa', year: '1850', value: 111 },
    { country: 'Africa', year: '1900', value: 133 },
    { country: 'Africa', year: '1950', value: 221 },
    { country: 'Africa', year: '1999', value: 767 },
    { country: 'Africa', year: '2050', value: 1766 },
    { country: 'Europe', year: '1750', value: 163 },
    { country: 'Europe', year: '1800', value: 203 },
    { country: 'Europe', year: '1850', value: 276 },
    { country: 'Europe', year: '1900', value: 408 },
    { country: 'Europe', year: '1950', value: 547 },
    { country: 'Europe', year: '1999', value: 729 },
    { country: 'Europe', year: '2050', value: 628 },
  ];

  const dv = new DataSet.View().source(sourceData);
  dv.transform({
    type: 'percent',
    field: 'value',
    dimension: 'country',
    groupBy: ['year'],
    as: 'percent',
  });
  const data = dv.rows;

  const scale = [{
    dataKey: 'year',
    type: 'linear',
    tickInterval: 50,
  }, {
    dataKey: 'percent',
    formatter: function(value) {

const sourceData = [
  { item: '事例一', count: 40 },
  { item: '事例二', count: 21 },
  { item: '事例三', count: 17 },
  { item: '事例四', count: 13 },
  { item: '事例五', count: 9 }
];

const scale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%',
}];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
});
const data = dv.rows;

export default class App extends React.Component {
  render() {
    return (
      
        
        
        
        <legend></legend>

}
  }]
};

const userData = [
  { type: '睡眠', value: 70 },
  { type: '淡茶 & 烟斗 & 冥想', value: 10 },
  { type: '写作', value: 10 },
  { type: '教课', value: 40 },
  { type: '酒吧吃肉配白酒', value: 40 },
  { type: '散步', value: 10 },
  { type: '拜访马大大', value: 30 },
  { type: '阅读', value: 30 },
];

const userDv = new DataSet.View().source(userData).transform({
  type: 'percent',
  field: 'value',
  dimension: 'type',
  as: 'percent'
});

const userScale = [{
  dataKey: 'percent',
  formatter: (val: any) => {
    return (val * 100).toFixed(2) + '%';
  }
}];

const stackInterval3Opts = {
  position: 'percent',
  color: 'type',

import 'zone.js';
import 'reflect-metadata';
import { Component, enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ViserModule } from 'viser-ng';
const DataSet = require('@antv/data-set');

const sourceData = [
  { 'State': 'WY', '小于5岁': 25635, '5至13岁': 1890, '14至17岁': 9314 },
  { 'State': 'DC', '小于5岁': 30352, '5至13岁': 20439, '14至17岁': 10225 },
  { 'State': 'VT', '小于5岁': 38253, '5至13岁': 42538, '14至17岁': 15757 },
  { 'State': 'ND', '小于5岁': 51896, '5至13岁': 67358, '14至17岁': 18794 },
  { 'State': 'AK', '小于5岁': 72083, '5至13岁': 85640, '14至17岁': 22153 }
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: 'fold',
  fields: ['小于5岁', '5至13岁', '14至17岁'],
  key: '年龄段',
  value: '人口数量',
  retains: ['State'],
});
const data = dv.rows;

const label = { offset: 12 };

@Component({
  selector: '#mount',
  template: `
  <div>
    </div>

$.getJSON('/assets/data/diamond.json', (sourceData) => {
      const dv = new DataSet.View().source(sourceData);
      dv.transform({
        type: 'bin.histogram',
        field: 'depth',
        binWidth: 4,
        as: ['depth', 'count'],
      });
      this.data = dv.rows;
    });
  }

$.getJSON('/assets/data/periodic-table.hex.json', (data) => {
      const dv = new DataSet.View().source(data, {
        type: 'hex'
      });
      this.setState({ data: dv });
    })
  }

getData: any = (): any => {
    const { graph, select } = this;
    const dv: any = new DataSet.View().source(graph, {
      type: 'graph',
    });
    dv.transform({
      type: 'diagram.sankey',
      nodeId: function nodeId(node) {
        return node.id;
      },
      nodeAlign: select,
    });
    return dv;
  };
  valid: any = (data): boolean => {