ar threshold = d3.scale.threshold()
	.domain([10,20,30])
	.range(["red","green","blue","black"])

console.log("/--------0")
console.log(threshold(-0))
console.log(threshold(-1))
console.log(threshold(-2))
console.log(threshold(-3))
console.log(threshold(-4))
console.log(threshold(-5))
console.log(threshold(-6))
console.log(threshold(-7))
console.log(threshold(-8))
console.log(threshold(-9))
console.log(threshold(-10))
console.log("/--------20")
console.log(threshold(11))
console.log(threshold(12))
console.log(threshold(13))
console.log(threshold(14))
console.log(threshold(15))
console.log(threshold(16))
console.log(threshold(17))
console.log(threshold(18))
console.log(threshold(19))
console.log(threshold(20))
console.log("/--------20")
console.log(threshold(21))
console.log(threshold(22))
console.log(threshold(23))
console.log(threshold(24))
console.log(threshold(25))
console.log(threshold(26))
console.log(threshold(27))
console.log(threshold(28))
console.log(threshold(29))
console.log(threshold(30))
console.log("/--------30")
console.log(threshold(31))
console.log(threshold(32))
console.log(threshold(33))
console.log(threshold(34))
console.log(threshold(35))
console.log(threshold(36))
console.log(threshold(37))
console.log(threshold(38))
console.log(threshold(39))
console.log("/--------40")
console.log(threshold(40))
console.log(threshold(41))
console.log(threshold(42))
console.log(threshold(43))
console.log(threshold(44))
console.log(threshold(45))
console.log(threshold(46))
console.log(threshold(47))
console.log(threshold(48))
console.log(threshold(49))
console.log(threshold(50))
console.log(threshold(100))

var threshold = d3.scale.threshold()
	.domain([10,20,30])
	.range(["red","green","blue","black"])

console.log(threshold.invertExtent("red"))
console.log(threshold.invertExtent("green"))
console.log(threshold.invertExtent("blue"))
console.log(threshold.invertExtent("black"))

var quantize = d3.scale.quantize()
	.domain([0,10])
	.range(["blue","red","green","yellow","black"])

console.log(quantize(5.2222))

var quantize = d3.scale.quantize()
	/*
		/—— .d3.scale.quantize()
		/———— 在此定义定量比例尺以及对应的值域颜色
	 */
	.domain([0,100])
	.range(["#0000CC","#0033CC","#0066CC","#0099CC","#00CCCC","#00FFCC","#3300CC","#3333CC","#3366CC","#3399CC"])

var r = [100,90,80,70,60,50,40,30,20,10] /* 圆的半径 */

var svg = d3.select("body")
	/*
		/—— d3.select("body").append("svg")，
		/———— 在 body 元素中的下面插入一个 svg 元素。高为 1400，宽为 1400
	 */
	.append("svg")
	.attr("width",200)
	.attr("height",300)

svg.selectAll("circle")
	/*
		/—— data()
		/———— 绑定 circle 为 r 的半径
		/—— enter()
		/———— 补足足够数量的 circle 元素
		/—— append()
		/———— 在srg 元素后插入一个 circle 元素
		/—— cx and cy
		/————  设置 x 坐标位置以及间隔大小
		/————— 高度位置设置为 190
	 */
	.data(r)
	.enter()
	.append('circle')
	.attr("cx",function (d,i) {
		return 100 + i * 10
	})
	.attr("cy",190)
	.attr("r",function (d) {
		return d
	})
	.attr("fill", function (d) {
		return quantize(d);
	});

var quantize = d3.scale.quantize()
	.domain([0,10])
	.range(["blue","red","green","yellow","black"])
console.log(quantize(0))
console.log(quantize(1))
console.log(quantize(2))
console.log(quantize(3))
console.log(quantize(4))
console.log(quantize(5))
console.log(quantize(6))
console.log(quantize(7))
console.log(quantize(8))
console.log(quantize(9))
console.log(quantize(10))

console.log("-----------")
var quantile = d3.scale.quantile()
	.domain([0,13])
	.range(["blue","red","green","yellow","black"])

console.log(quantile(0))
console.log(quantile(1))
console.log(quantile(2))
console.log(quantile(3))
console.log(quantile(4))
console.log(quantile(5))
console.log(quantile(6))
console.log(quantile(7))
console.log(quantile(8))
console.log(quantile(9))
console.log(quantile(10))

var linear = d3.scale.linear()
                .domain([0,500])
                .range([0,100])
/*
                |—— linear.clamp
                |———— 当超过本身定义范围时缩小到 ”值域“ 范围内，1200结果为 @100
                |——————// console.log(linear.invert(1022))
                |———————— 通过定义域来获取所对应的值（超过了定义域内值，将会被进行压缩到定义域范围内）
                |—— linear.invert
                |———— 通过值域 10 来返回定义域内所对应的值 @50
*/
linear.clamp(true)            
console.log(linear(1022))       
/*500*/
console.log(linear(10))         
/*2*/
console.log(linear.invert(10))  
/*50*/

var linear = d3.scale.linear()
                .domain([0,500])
/*
                    |—— linear.rangeRound()
                    |————   代替传统的 .range()来完成值域的定义，通过四舍五入来进行计算，并取整数。
                    |—————— .range vs rangeRound
                    |—————————— 2.222 \ 2
                    |—— linear.nice()
                */
linear.rangeRound([0,100])  
            console.log(linear(11.11)) 
/*2*/

var linear = d3.scale.linear()
                .domain([0,500])
                .range([0,100])
/*
                10 @2
                15 @3
                20 @4
*/
console.log(linear(10))
            console.log(linear(15))
            console.log(linear(20))

// 数据源
var databases = [20, 21, 34, 53, 60, 90, 110, 230, 340, 550];

/*
    1. 选择 body 元素
    2. 在 <body> 中添加 <svg> 元素
    3. 通过 attr 来设置高度
        |—— width   @1400
        |—— heigh   t@700 
*/
var width = 1400;
var height = 700;


var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)

/*
    |—— 外边框设置  @padding
    |————| top  @20
    |————| right    @20
    |————| bottom   @20
    |————| left @20
    |—— 空白矩形占比宽度    @rectStep
    |—— 实体站比宽度    @rectWidth
*/
var padding = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20
};
var rectStep = 60;
var rectWidth = 35;

/*
    |—— 选择一个空集
    |—— 使用 enter 补足元素
    |—— 添加 rect 元素与数组绑定一致
    |——————| 设置 颜色为 steelblue
    |——————| 设置举行的 x 坐标中的空白矩形站比 为rectStep@35
    |——————| 设置矩形的 y 坐标
    |——————| 设置矩形的宽度
    |——————| 设置矩形的高度

    |—— 数组 databases 长度为 10,则对应十个数据
    |————| 分别设置其颜色为 蓝色
    |————| 其中 d,i 分别对应数据（datum，d）以及 索引号（index，i）
    |——————| 数组： 20,21,34,53,60,90,110,230,340,550
    |——————| 索引： 00,01,02,03,04,05,006,007,008,009
    
    /- 以地一个数据 为例：
    /————| height - padding.bottom - d;
    /-—————| 20 - 0 × 60 = 20 (x)
    /——————| 700 - 20 - 20 = 660 (y)
*/
var rect = svg.selectAll("rect")
    .data(databases)
    .enter()
    .append("rect")
    .attr("fill", "blue")
    .attr("x", function (d, i) {
        return padding.left + i * rectStep;
    })
    .attr("y", function (d) {
        return height - padding.bottom - d;
    })
    .attr('width', rectWidth)
    .attr("height", function (d) {
        return d;
    })

/*
    |—— 选择所有 text 元素
    |————| 绑定 databases 数据
    |————| 通过 enter 来补足足够数量的 <text> 元素
    |————| 添加 text 元素并与其绑定数组长度一致
*/
var text = svg.selectAll("text")
    .data(databases)
    .enter()
    .append("text")
    .attr("fill", "grey")
    .attr("font-size", "10px")
    .attr("text-anchor", "middle")
    .attr("x", function (d, i) {
        return padding.left + i * rectStep;
    })
    .attr("y", function (d) {
        return height - padding.bottom - d;
    })

    /*
        |—— dx and dy
        |————| x 轴平移时的大小
        |————| y y轴平移时的大小
    */
    .attr("dx", rectWidth / 2)
    .attr("dy", "-1em")
    .text(function (d) {
        return d;
    })

<script>
    /*
        |—— 数据集
        |———— 20,10,34,53,60,90,110,230,340,550
        |———— 00,01,02,03,04,05,006,007,008,009
    */
    var databases = [20, 10, 34, 53, 60, 90, 110, 230, 340, 550];
    /*
        |—— 设置画布高度与宽度
        |—— 设置矩形宽度与间隔
    */
    var width = 1400;
    var height = 700;

    
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)

    var padding = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
    };
    var rectStep = 60;
    var rectWidth = 35;

    function draw() {
        // 矩形的 update 处理方法
        var updateRect = svg.selectAll("rect")
            .data(databases)
        var enterRect = updateRect.enter()
        var exitRect = updateRect.exit()
        
        updateRect.attr("fill","blue")
            .attr("x",function(d,i) {
                return padding.left + i * rectStep;
            })
            .attr("y",function(d) {
                return height - padding.bottom - d;
            })
            .attr("width",rectWidth)
            .attr("height",function(d) {
                return d;
            })

        // 矩形的 enter 处理方法
        enterRect.append("rect")
            .attr("fill","blue")
            .attr("x", function(d,i) {
                return padding.left + i * rectStep;
            })
            .attr("y",function(d) {
                return height - padding.bottom - d;
            })
            .attr("width",rectWidth)
            .attr("height",function(d) {
                return d;
            })

        // 矩形的 exit 处理方法 
        exitRect.remove()

        // 文字的 Update 处理方法
        var updateText = svg.selectAll("text")
            .data(databases)    
        var enterText = updateText.enter()
        var exitText = updateText.exit()

        updateText.attr("fill","blue")
            .attr("font-size","14px")
            .attr("text-anchor","middle")
            .attr("x", function(d,i) {
                return padding.left + i * rectStep;
            })
            .attr("y", function(d) {
                return height - padding-bottom - d
            })
            .attr("dx",rectWidth/2)
            .attr("dx","-1em")
            .text(function(d) {
                return d;
            })
        
        // 文字的 enter 处理方法
        enterText.append("text")
            .attr("fill","blue")
            .attr("font-size","14px")
            .attr("text-anchor","middle")
            .attr("x", function(d,i) {
                return padding.left + i * rectStep;
            })
            .attr("y",function(d) {
                return height - padding.bottom -d;
            })
            .attr("dx",rectWidth/2)
            .attr("dy","-1em")
            .text(function(d) {
                return d
            })
        
        // 文字的 exit 处理方法 
        exitText.remove()
    }

        draw();
        function mysort() {
            databases.sort(d3.ascending);
            draw()
        }
</script>
<button type="submit" onclick="mysort()">Go</button>

var padding = {
    width: 1000,
    height: 1000
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height", padding.height)

var projection = d3.geo.mercator()
    .center([107,31])
    .scale(800)
    .translate([padding.width/2, padding.height/2])

var path = d3.geo.path()
    .projection(projection)

var min = 1e-4;

var graticule = d3.geo.graticule()
    .extent([[-180,-90],[180+min,90]])
    .step([10,10])

var grid = graticule()
svg.append("path")
    .datum(grid)
    .attr("class","graticule")
    .attr("d",path)
/*
    * 绘制地图
*/
d3.json("./china_topo.json", function (error, toporoot) {
    if (error)
        return console.log(error)
    var georoot = topojson.feature(toporoot,toporoot.objects.china)

    var china = svg.append("g")
    var provinces = china.selectAll("path")
        .data(georoot.features)
        .enter()
        .append("path")
        .attr("class","province")
        .attr("d",path)

    d3.json("./tree.json", function (error, valuedata) {
        /*
            * values
            *   将读取到的数组存储到 values 中
            *   令其索引号为各省的名称
            * maxvalue & minvalue
            *   分别求出最大值和最小值
         */
        var values = [];
        for(var i=0; i<valuedata.provinces.length; i++) {
            var name = valuedata.provinces[i].name;
            var value = valuedata.provinces[i].value;
            values[name] = value;
        }
        var maxvalue = d3.max(valuedata.provinces, function (d) {
            return d.value
        })
        var minvalue = 0;

        /*
            * linear
            *   利用线性比例尺来返回白色和蓝色之间的差值为 0,5
            *
         */
        var linear = d3.scale.linear()
            .domain([minvalue, maxvalue])
            .range([0,5]);

        /// color
        var white = d3.rgb(240,255,255)
        var blue = d3.rgb(0,0,255)

        var computeColor = d3.interpolate(white,blue)

        /*
            * 设置各省份填充颜色
            * 设置线性渐变
         */
        provinces.style("fill", function(d,i){
            var t = linear( values[d.properties.name] );
            var color = computeColor(t);
            return color.toString();
        });

        /// 应用并定义一个线性渐变
        var linedefs = svg.append("defs")

        var linearGradient = linedefs.append("linearGradient")
            .attr("id","linearColor")
            .attr("x1","10%")
            .attr("y1","40%")
            .attr("x2","100%")
            .attr("y2","0%")

        var stop1 = linearGradient.append("stop")
            .attr("offset","10%")
            .style("stop-color",white.toString())
        var stop2 = linearGradient.append("stop")
            .attr("offset","100%")
            .style("stop-color",blue    .toString())

        var colorRect = svg.append("rect")
            .attr("x",20)
            .attr("y",490)
            .attr("width",180)
            .attr("height",30)
            .style("fill","url(#" + linearGradient.attr("id") + ")")

        var minValueText = svg.append("text")
            .attr("class","valueText")
            .attr("x",20)
            .attr("y",490)
            .attr("dy","-0.3em")
            .text(function () {
                return minvalue
            })

        var maxValueText = svg.append("text")
            .attr("class","valueText")
            .attr("x",160)
            .attr("y",490)
            .attr("dy","-0.3em")
            .text(function () {
                return maxvalue
            })

    })
})

var padding = {
    width: 1000,
    height: 1000
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height", padding.height)

var projection = d3.geo.mercator()
    .center([107,31])
    .scale(800)
    .translate([padding.width/2, padding.height/2])

var path = d3.geo.path()
    .projection(projection)

var min = 1e-4;

var graticule = d3.geo.graticule()
    .extent([[-180,-90],[180+min,90]])
    .step([10,10])

var grid = graticule()
svg.append("path")
    .datum(grid)
    .attr("class","graticule")
    .attr("d",path)
/*
    * 绘制地图
*/
d3.json("./china_topo.json", function (error, toporoot) {
    if (error)
        return console.log(error)
    var georoot = topojson.feature(toporoot,toporoot.objects.china)

    var china = svg.append("g")
    var provinces = china.selectAll("path")
        .data(georoot.features)
        .enter()
        .append("path")
        .attr("class","province")
        .attr("d",path)

    d3.json("./tree.json", function (error, places) {
        /*
            * location
            *   coor 用于计算标点处的位置
            *   circle 标注点
            *   image 标注地图
         */
        var location = svg.selectAll(".location")
            .data(places.location)
            .enter()
            .append("g")
            .attr("class","location")
            .attr("transform", function (d) {
                var coor = projection([d.log, d.lat])
                return "translate(" + coor[0] + "," + coor[1] + ")"
            })
        location.append("circle")
            .attr("r",2)

        location.append("image")
            .attr("y",-30)
            .attr("x",-20)
            .attr("class","localclass")
            .attr("src:href", function (d) {
                return d.img
            })
    })
})

var padding = {
    width: 1000,
    height: 1000
}

var svg = d3.select("body")
    .append("svg")
    .attr("width",padding.width)
    .attr("height", padding.height)
    .attr("xmlns","http://www.w3.org/2000/svg")
    .attr("version","1.1")

var projection = d3.geo.mercator()
    .center([107,31])
    .scale(800)
    .translate([padding.width/2, padding.height/2])

var path = d3.geo.path()
    .projection(projection)

var defs = svg.append("defs")

var gaussian = defs.append("filter")
    .attr("id","gaussian")
    .attr("x","0")
    .attr("y","0")
    .attr("width","200%")
    .attr("height","200%")

gaussian.append("feOffset")
    .attr("result","offOut")
    .attr("in","SourceGraphic")
    .attr("dx","20")
    .attr("dy","20")


gaussian.append("feGaussianBlur")
    .attr("result","blurOut")
    .attr("in","offOut")
    .attr("stdDeviation","10")

gaussian.append("feBlend")
    .attr("in","SourceGraphic")
    .attr("in2","blurOut")
    .attr("mode","normal")

var min = 1e-4;

var graticule = d3.geo.graticule()
    .extent([[-180,-90],[180+min,90]])
    .step([10,10])

var grid = graticule()
svg.append("path")
    .datum(grid)
    .attr("class","graticule")
    .attr("d",path)

/*
    * 绘制地图
*/
d3.json("./china_topo.json", function (error, toporoot) {
    if (error)
        return console.log(error)
    var georoot = topojson.feature(toporoot,toporoot.objects.china)

    var china = svg.append("g")
    var provinces = china.selectAll("path")
        .data(georoot.features)
        .enter()
        .append("path")
        .attr("class","province")
        .attr("d",path)

    d3.json("./tree.json", function (error, chinadata) {
        var cities = []
        for(var i=0;i<chinadata.provinces.length;i++) {
            var pv = chinadata.provinces[i];

            for (var j=0;j<pv.children.length;j++) {
                var city = pv.children[j]
                cities.push(
                    {
                        name: city.name,
                        log: Number(city.log),
                        lat: Number(city.lat)
                    })
            }
        }

        var min = d3.rgb(246,255,185)
        var max = d3.rgb(247,186,8)

        var computeColor = d3.interpolate(min,max)

        var points = svg.selectAll("circle")
            .data(cities)
            .enter()
            .append("circle")
            .attr("class","point")
            .attr("cx", function (d) {
                return projection([d.log, d.lat])[0]
            })
            .attr("cy",function (d) {
                return projection([d.log, d.lat])[1]
            })
            .attr('r',1)
            .style("fill", function (d) {
                var color = computeColor(Math.random())
                return color.toString()
            })
            .attr("filter","url(#"+ gaussian.attr("id") +")");
    })
})