diff --git a/package.json b/package.json
index fe6f165ae..68829b83c 100644
--- a/package.json
+++ b/package.json
@@ -89,8 +89,9 @@
     "silent": false
   },
   "dependencies": {
+    "@antv/attr": "0.0.1-beta.2",
+    "@antv/util": "~1.0.6",
     "fecha": "~2.3.1",
-    "hammerjs": "^2.0.8",
-    "@antv/util": "~1.0.4"
+    "hammerjs": "^2.0.8"
   }
 }
diff --git a/src/attr/base.js b/src/attr/base.js
deleted file mode 100644
index 1c772aaaf..000000000
--- a/src/attr/base.js
+++ /dev/null
@@ -1,177 +0,0 @@
-const Util = require('../util/common');
-
-function toScaleString(scale, value) {
-  if (Util.isString(value)) {
-    return value;
-  }
-  return scale.invert(scale.scale(value));
-}
-
-
-class AttributeBase {
-
-  constructor(cfg) {
-    /**
-     * 属性的类型
-     * @type {String}
-     */
-    this.type = 'base';
-
-    /**
-     * 属性的名称
-     * @type {String}
-     */
-    this.name = null;
-
-    /**
-     * 回调函数
-     * @type {Function}
-     */
-    this.method = null;
-
-    /**
-     * 备选的值数组
-     * @type {Array}
-     */
-    this.values = [];
-
-    /**
-     * 属性内部的度量
-     * @type {Array}
-     */
-    this.scales = [];
-
-    /**
-     * 是否通过线性取值, 如果未指定，则根据数值的类型判定
-     * @type {Boolean}
-     */
-    this.linear = null;
-
-    Util.mix(this, cfg);
-  }
-
-  // 获取属性值，将值映射到视觉通道
-  _getAttrValue(scale, value) {
-    const values = this.values;
-    if (scale.isCategory && !this.linear) {
-      const index = scale.translate(value);
-      return values[index % values.length];
-    }
-    const percent = scale.scale(value);
-    return this.getLinearValue(percent);
-  }
-
-  /**
-   * 如果进行线性映射，返回对应的映射值
-   * @protected
-   * @param  {Number} percent 百分比
-   * @return {*}  颜色值、形状、大小等
-   */
-  getLinearValue(percent) {
-    const values = this.values;
-    const steps = values.length - 1;
-    const step = Math.floor(steps * percent);
-    const leftPercent = steps * percent - step;
-    const start = values[step];
-    const end = step === steps ? start : values[step + 1];
-    const rstValue = start + (end - start) * leftPercent;
-    return rstValue;
-  }
-
-  /**
-   * 默认的回调函数
-   * @param {*} value 回调函数的值
-   * @type {Function}
-   * @return {Array} 返回映射后的值
-   */
-  callback(value) {
-    const self = this;
-    const scale = self.scales[0];
-    let rstValue = null;
-    if (scale.type === 'identity') {
-      rstValue = scale.value;
-    } else {
-      rstValue = self._getAttrValue(scale, value);
-    }
-    return rstValue;
-  }
-
-  /**
-   * 根据度量获取属性名
-   * @return {Array} dims of this Attribute
-   */
-  getNames() {
-    const scales = this.scales;
-    const names = this.names;
-    const length = Math.min(scales.length, names.length);
-    const rst = [];
-    for (let i = 0; i < length; i++) {
-      rst.push(names[i]);
-    }
-    return rst;
-  }
-
-  /**
-   * 根据度量获取维度名
-   * @return {Array} dims of this Attribute
-   */
-  getFields() {
-    const scales = this.scales;
-    const rst = [];
-    Util.each(scales, function(scale) {
-      rst.push(scale.field);
-    });
-    return rst;
-  }
-
-  /**
-   * 根据名称获取度量
-   * @param  {String} name the name of scale
-   * @return {Scale} scale
-   */
-  getScale(name) {
-    const scales = this.scales;
-    const names = this.names;
-    const index = names.indexOf(name);
-    return scales[index];
-  }
-
-  /**
-   * 映射数据
-   * @param {*} param1...paramn 多个数值
-   * @return {Array} 映射的值组成的数组
-   */
-  mapping(...params) {
-    const scales = this.scales;
-    const callback = this.callback;
-    let values = params;
-    if (callback) {
-      for (let i = 0, len = params.length; i < len; i++) {
-        params[i] = this._toOriginParam(params[i], scales[i]);
-      }
-      values = callback.apply(this, params);
-    }
-    if (!Util.isArray(values)) {
-      values = [ values ];
-    }
-    return values;
-  }
-
-  // 原始的参数
-  _toOriginParam(param, scale) {
-    let rst = param;
-    if (!scale.isLinear) {
-      if (Util.isArray(param)) {
-        rst = [];
-        for (let i = 0, len = param.length; i < len; i++) {
-          rst.push(toScaleString(scale, param[i]));
-        }
-      } else {
-        rst = toScaleString(scale, param);
-      }
-    }
-    return rst;
-  }
-}
-
-module.exports = AttributeBase;
diff --git a/src/util/color.js b/src/attr/color-util.js
similarity index 98%
rename from src/util/color.js
rename to src/attr/color-util.js
index 7a7aa340a..5ea8f3943 100644
--- a/src/util/color.js
+++ b/src/attr/color-util.js
@@ -1,4 +1,4 @@
-const Util = require('./common');
+const Util = require('../util/common');
 
 // 获取颜色之间的插值
 function getValue(start, end, percent, index) {
diff --git a/src/attr/color.js b/src/attr/color.js
index 20a65eb35..96bc86cb1 100644
--- a/src/attr/color.js
+++ b/src/attr/color.js
@@ -1,6 +1,6 @@
-const ColorUtil = require('../util/color');
-const Base = require('./base');
 const Util = require('../util/common');
+const ColorUtil = require('./color-util');
+const Base = require('@antv/attr/src/base'); // Attr 的基类
 
 class Color extends Base {
 
diff --git a/src/attr/index.js b/src/attr/index.js
index d30ea57a5..6a2d905e4 100644
--- a/src/attr/index.js
+++ b/src/attr/index.js
@@ -1,6 +1,6 @@
 module.exports = {
-  Position: require('./position'),
-  Shape: require('./shape'),
-  Size: require('./size'),
+  Position: require('@antv/attr/src/position'),
+  Shape: require('@antv/attr/src/shape'),
+  Size: require('@antv/attr/src/size'),
   Color: require('./color')
 };
diff --git a/src/attr/position.js b/src/attr/position.js
deleted file mode 100644
index 0cb2e946c..000000000
--- a/src/attr/position.js
+++ /dev/null
@@ -1,85 +0,0 @@
-const Util = require('../util/common');
-const Base = require('./base');
-
-class Position extends Base {
-  constructor(cfg) {
-    super(cfg);
-    this.names = [ 'x', 'y' ];
-    this.type = 'position';
-  }
-
-  mapping(x, y) {
-    const scales = this.scales;
-    const coord = this.coord;
-    const scaleX = scales[0];
-    const scaleY = scales[1];
-    let rstX;
-    let rstY;
-    let obj;
-    if (Util.isNil(x) || Util.isNil(y)) {
-      return [];
-    }
-    if (Util.isArray(y) && Util.isArray(x)) {
-      rstX = [];
-      rstY = [];
-      for (let i = 0, j = 0, xLen = x.length, yLen = y.length; i < xLen && j < yLen; i++, j++) {
-        obj = coord.convertPoint({
-          x: scaleX.scale(x[i]),
-          y: scaleY.scale(y[j])
-        });
-        rstX.push(obj.x);
-        rstY.push(obj.y);
-      }
-    } else if (Util.isArray(y)) {
-      x = scaleX.scale(x);
-      rstY = [];
-      Util.each(y, function(yVal) {
-        yVal = scaleY.scale(yVal);
-        obj = coord.convertPoint({
-          x,
-          y: yVal
-        });
-        if (rstX && rstX !== obj.x) {
-          if (!Util.isArray(rstX)) {
-            rstX = [ rstX ];
-          }
-          rstX.push(obj.x);
-        } else {
-          rstX = obj.x;
-        }
-        rstY.push(obj.y);
-      });
-    } else if (Util.isArray(x)) {
-      y = scaleY.scale(y);
-      rstX = [];
-      Util.each(x, function(xVal) {
-        xVal = scaleX.scale(xVal);
-        obj = coord.convertPoint({
-          x: xVal,
-          y
-        });
-        if (rstY && rstY !== obj.y) {
-          if (!Util.isArray(rstY)) {
-            rstY = [ rstY ];
-          }
-          rstY.push(obj.y);
-        } else {
-          rstY = obj.y;
-        }
-        rstX.push(obj.x);
-      });
-    } else {
-      x = scaleX.scale(x);
-      y = scaleY.scale(y);
-      const point = coord.convertPoint({
-        x,
-        y
-      });
-      rstX = point.x;
-      rstY = point.y;
-    }
-    return [ rstX, rstY ];
-  }
-}
-
-module.exports = Position;
diff --git a/src/attr/shape.js b/src/attr/shape.js
deleted file mode 100644
index 624e0b3ab..000000000
--- a/src/attr/shape.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const Base = require('./base');
-
-class Shape extends Base {
-  constructor(cfg) {
-    super(cfg);
-    this.names = [ 'shape' ];
-    this.type = 'shape';
-    this.gradient = null;
-  }
-
-  /**
-   * @override
-   */
-  getLinearValue(percent) {
-    const values = this.values;
-    const index = Math.round((values.length - 1) * percent);
-    return values[index];
-  }
-}
-
-module.exports = Shape;
diff --git a/src/attr/size.js b/src/attr/size.js
deleted file mode 100644
index cae135cd7..000000000
--- a/src/attr/size.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const Base = require('./base');
-
-class Size extends Base {
-  constructor(cfg) {
-    super(cfg);
-    this.names = [ 'size' ];
-    this.type = 'size';
-    this.gradient = null;
-  }
-}
-
-module.exports = Size;
diff --git a/test/unit/attr/base-spec.js b/test/unit/attr/base-spec.js
index 09701bb7c..862e847a8 100644
--- a/test/unit/attr/base-spec.js
+++ b/test/unit/attr/base-spec.js
@@ -1,94 +1,94 @@
-const expect = require('chai').expect;
-const Attr = require('../../../src/attr/base');
-const Scale = require('../../../src/scale/');
+// const expect = require('chai').expect;
+// const Attr = require('../../../src/attr/base');
+// const Scale = require('../../../src/scale/');
 
-describe('attr base test', function() {
-  const scale1 = new Scale.Linear({
-    field: 'dim1',
-    min: 0,
-    max: 100
-  });
-  const scale2 = new Scale.Cat({
-    field: 'dim2',
-    values: [ 'a', 'b', 'c', 'd' ]
-  });
-  it('test init', function() {
-    const attr = new Attr({
-      type: 'test',
-      names: [ 't1', 't2' ],
-      scales: [ scale1, scale2 ]
-    });
-    expect(attr.type).equal('test');
-    expect(attr.getNames()).eqls([ 't1', 't2' ]);
-  });
-  it('test callback', function() {
-    const attr = new Attr({
-      type: 'test',
-      names: [ 't1', 't2' ],
-      callback(v1, v2) {
-        return v1 + v2;
-      },
-      scales: [ scale1, scale2 ]
-    });
+// describe('attr base test', function() {
+//   const scale1 = new Scale.Linear({
+//     field: 'dim1',
+//     min: 0,
+//     max: 100
+//   });
+//   const scale2 = new Scale.Cat({
+//     field: 'dim2',
+//     values: [ 'a', 'b', 'c', 'd' ]
+//   });
+//   it('test init', function() {
+//     const attr = new Attr({
+//       type: 'test',
+//       names: [ 't1', 't2' ],
+//       scales: [ scale1, scale2 ]
+//     });
+//     expect(attr.type).equal('test');
+//     expect(attr.getNames()).eqls([ 't1', 't2' ]);
+//   });
+//   it('test callback', function() {
+//     const attr = new Attr({
+//       type: 'test',
+//       names: [ 't1', 't2' ],
+//       callback(v1, v2) {
+//         return v1 + v2;
+//       },
+//       scales: [ scale1, scale2 ]
+//     });
 
-    const rst = attr.mapping(10, 'a');
-    expect(rst[0]).equal('10a');
-  });
+//     const rst = attr.mapping(10, 'a');
+//     expect(rst[0]).equal('10a');
+//   });
 
-  it('test linear scale with two values', function() {
-    const attr = new Attr({
-      type: 'test',
-      names: [ 't1', 't2' ],
-      values: [ 0, 10 ],
-      scales: [ scale1, scale2 ]
-    });
-    const rst = attr.mapping(10, 'a');
-    expect(rst[0]).equal(1);
-  });
+//   it('test linear scale with two values', function() {
+//     const attr = new Attr({
+//       type: 'test',
+//       names: [ 't1', 't2' ],
+//       values: [ 0, 10 ],
+//       scales: [ scale1, scale2 ]
+//     });
+//     const rst = attr.mapping(10, 'a');
+//     expect(rst[0]).equal(1);
+//   });
 
-  it('test linear scale with three values', function() {
-    const attr = new Attr({
-      type: 'test',
-      names: [ 't1', 't2' ],
-      values: [ 0, 10, 40 ],
-      scales: [ scale1, scale2 ]
-    });
-    let rst = attr.mapping(40);
-    expect(rst[0]).equal(8);
-    rst = attr.mapping(60);
-    expect(Math.round(rst[0])).equal(16);
-  });
+//   it('test linear scale with three values', function() {
+//     const attr = new Attr({
+//       type: 'test',
+//       names: [ 't1', 't2' ],
+//       values: [ 0, 10, 40 ],
+//       scales: [ scale1, scale2 ]
+//     });
+//     let rst = attr.mapping(40);
+//     expect(rst[0]).equal(8);
+//     rst = attr.mapping(60);
+//     expect(Math.round(rst[0])).equal(16);
+//   });
 
-  it('test cat scale with values', function() {
-    const attr = new Attr({
-      type: 'test',
-      names: [ 't1', 't2' ],
-      values: [ 'red', 'blue' ],
-      scales: [ scale2, scale1 ]
-    });
-    let rst = attr.mapping('a');
-    expect(rst[0]).equal('red');
-    rst = attr.mapping('b');
-    expect(rst[0]).equal('blue');
-  });
+//   it('test cat scale with values', function() {
+//     const attr = new Attr({
+//       type: 'test',
+//       names: [ 't1', 't2' ],
+//       values: [ 'red', 'blue' ],
+//       scales: [ scale2, scale1 ]
+//     });
+//     let rst = attr.mapping('a');
+//     expect(rst[0]).equal('red');
+//     rst = attr.mapping('b');
+//     expect(rst[0]).equal('blue');
+//   });
 
-  it('getFields', function() {
-    const attr = new Attr({
-      type: 'test',
-      names: [ 't1', 't2' ],
-      values: [ 0, 10, 40 ],
-      scales: [ scale1, scale2 ]
-    });
-    expect(attr.getFields()).to.eql([ 'dim1', 'dim2' ]);
-  });
+//   it('getFields', function() {
+//     const attr = new Attr({
+//       type: 'test',
+//       names: [ 't1', 't2' ],
+//       values: [ 0, 10, 40 ],
+//       scales: [ scale1, scale2 ]
+//     });
+//     expect(attr.getFields()).to.eql([ 'dim1', 'dim2' ]);
+//   });
 
-  it('getScale', function() {
-    const attr = new Attr({
-      type: 'test',
-      names: [ 't1', 't2' ],
-      values: [ 0, 10, 40 ],
-      scales: [ scale1, scale2 ]
-    });
-    expect(attr.getScale('t2')).to.eql(scale2);
-  });
-});
+//   it('getScale', function() {
+//     const attr = new Attr({
+//       type: 'test',
+//       names: [ 't1', 't2' ],
+//       values: [ 0, 10, 40 ],
+//       scales: [ scale1, scale2 ]
+//     });
+//     expect(attr.getScale('t2')).to.eql(scale2);
+//   });
+// });
diff --git a/test/unit/util/color-spec.js b/test/unit/attr/color-spec.js
similarity index 94%
rename from test/unit/util/color-spec.js
rename to test/unit/attr/color-spec.js
index 6d7b1c5d3..eea8b0310 100644
--- a/test/unit/util/color-spec.js
+++ b/test/unit/attr/color-spec.js
@@ -1,5 +1,5 @@
 const expect = require('chai').expect;
-const ColorUtil = require('../../../src/util/color');
+const ColorUtil = require('../../../src/attr/color-util');
 
 describe('color util test', function() {
   it('color to rgb', () => {