Use attr instead of direct access

src/chart/themeRiver/ThemeRiverView.js

@@ -29,7 +29,7 @@ define(function (require) {
             var rect = layoutInfo.rect;
             var boundaryGap = layoutInfo.boundaryGap;
 
-            group.position = [0, rect.y + boundaryGap[0]];
+            group.attr('position', [0, rect.y + boundaryGap[0]]);
 
             function keyGetter(item) {
                 return item.name;

src/chart/treemap/TreemapView.js

@@ -133,7 +133,7 @@
                 this._initEvents(containerGroup);
                 this.group.add(containerGroup);
             }
-            containerGroup.position = [layoutInfo.x, layoutInfo.y];
+            containerGroup.attr('position', [layoutInfo.x, layoutInfo.y]);
 
             return containerGroup;
         },
@@ -326,7 +326,7 @@
                     if (storageName === 'nodeGroup') {
                         if (last.old) {
                             target.position = el.position.slice();
-                            el.position = last.old;
+                            el.attr('position', last.old);
                         }
                     }
                     else {
@@ -676,7 +676,7 @@
 
         parentGroup.add(group);
         // x,y are not set when el is above view root.
-        group.position = [thisLayout.x || 0, thisLayout.y || 0];
+        group.attr('position', [thisLayout.x || 0, thisLayout.y || 0]);
         group.__tmNodeWidth = thisWidth;
         group.__tmNodeHeight = thisHeight;
 

src/component/dataZoom/SliderZoomModel.js

@@ -33,7 +33,7 @@ define(function(require) {
             dataBackground: {
                 lineStyle: {
                     color: '#2f4554',
-                    width: 1,
+                    width: 0.5,
                     opacity: 0.3
                 },
                 areaStyle: {
@@ -45,13 +45,13 @@ define(function(require) {
                                                     // if dataBackgroundColor is set, borderColor
                                                     // is ignored.
 
-            fillerColor: 'rgba(89,170,216,0.15)',     // Color of selected area.
+            fillerColor: 'rgba(167,183,204,0.4)',     // Color of selected area.
             // handleColor: 'rgba(89,170,216,0.95)',     // Color of handle.
             // handleIcon: 'path://M4.9,17.8c0-1.4,4.5-10.5,5.5-12.4c0-0.1,0.6-1.1,0.9-1.1c0.4,0,0.9,1,0.9,1.1c1.1,2.2,5.4,11,5.4,12.4v17.8c0,1.5-0.6,2.1-1.3,2.1H6.1c-0.7,0-1.3-0.6-1.3-2.1V17.8z',
             handleIcon: 'path://M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z',
             handleSize: 10,
             handleStyle: {
-                color: '#92B5D4'
+                color: '#a7b7cc'
             },
 
             labelPrecision: null,

src/component/timeline/SliderTimelineView.js

@@ -264,8 +264,8 @@ define(function (require) {
                 labelsPosition[1] = mainPosition[1] + labelPosOpt;
             }
 
-            mainGroup.position = mainPosition;
-            labelGroup.position = labelsPosition;
+            mainGroup.attr('position', mainPosition);
+            labelGroup.attr('position', labelsPosition);
             mainGroup.rotation = labelGroup.rotation = layoutInfo.rotation;
 
             setOrigin(mainGroup);

src/util/layout.js

@@ -275,10 +275,10 @@ define(function(require) {
             positionInfo, containerRect, margin
         );
 
-        group.position = [
+        group.attr('position', [
             positionInfo.x - groupRect.x,
             positionInfo.y - groupRect.y
-        ];
+        ]);
     };
 
     /**