刚才提到构造函数里变化，那在创建图层的时候就需要提前进行设置。首先要设置图层styling和dataAttributes属性，当styling为false时可以使用CSS，dataAttributes为图层属性表中的字段或者字段组，示例如下:

var featureLayer = new FeatureLayer(“featurelayerUrl”,{
	id:”featurelayer”,
	styling:false;
	dataAttributes:[“fb_pop”]
})

3.2设置要素的(data- )属性

classbreaks = [
                        {
                            attribute:"classbreak0",
                            value:959,
                            legendLabel:"0 - 959"
                        }, {
                            attribute:"classbreak1",
                            value:1492,
                            legendLabel:"959 - 1,492"
                        }, {
                            attribute:"classbreak2",
                            value:1914,
                            legendLabel:"1,492 - 1.914"
                        },
						  ......
                    ];

	if (featureLayer.surfaceType === "svg") {
                        on(featureLayer, "graphic-draw", function (evt) {
                            var tableAttr = evt.graphic.attributes.pop_urban_;
                            var category;
                            if (tableAttr < classbreaks[0].value) {
                                category = classbreaks[0].attribute;
                            } else if (tableAttr >= classbreaks[0].value && tableAttr < classbreaks[1].value) {
                                category = classbreaks[1].attribute;
                            } 
							......
        
                            // 为当前要素设置data attribute                            
                            evt.node.setAttribute("data-classbreak", category);
                        });
                    }

使用CSS的元素选择方法进行要素选择，常见的方法基于ID, class，元素属性等。这里使用的是属性选择器，使用之前定义的data-classbreak。

这里要顺便提一下在Graphic类中直接提供了一些data attributes：

选择了某一个或者某一类要素后就可以进行样式及动画的设置了，上面几步其实是做了一个类似分类渲染的分类，那接下来就对不同的类型进行样式和填充设置。

path[data-classbreak="classbreak0"] {
                stroke: rgb(255, 245, 220);
                stroke-width: 1pt;
                stroke-opacity: 0.35;
                fill: rgb(255, 215, 120);
                fill-opacity: 0.8;
            }
        
            path[data-classbreak="classbreak1"] {
                stroke: rgb(255, 233, 185);
                stroke-width: 1pt;
                stroke-opacity: 0.35;
                fill: rgb(255, 193, 60);
                fill-opacity: 0.8;
            }

分类渲染社会自后，继续设置要素动画效果，添加animation动画效果：

@keyframes highlight {
                100% {
                    fill-opacity: 1;
                    stroke-width: 4;
                    stroke: rgb(220, 20, 60);
                }
            }
        
            @-webkit-keyframes highlight {
                100% {
                    fill-opacity: 1;
                    stroke-width: 4;
                    stroke: rgb(220, 20, 60);
                }
            }            
				......
        
            path:hover {
                cursor: pointer;
                animation-duration: 0.2s;
                animation-name: highlight;
                animation-timing-function: linear;
                animation-fill-mode: forwards;
                -webkit-animation-duration: 0.2s;
                -webkit-animation-name: highlight;
                -webkit-animation-timing-function: linear;
                -webkit-animation-fill-mode: forwards;
            }

3.5 效果