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(600)
    .translate([padding.width/2,padding.height/2])

var color = d3.scale.category20b()

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

d3.json("./china_topo.json", function (error, toporoot) {
    if (error)
        return console.error(error)
    console.log(toporoot)

    /*
        * (1)
        *   将 TopoJSON 转换为 GeoJSON 并保存在 Georoot 中。
        *   Feature 主要用于返回 GeoJSON 的特征（Feature）或特征集合（FeatureCollection）
        *   feature(topology, object) 第一额参数表示 TopJSON 文件对象，第二个参数来表示出几何体的对象。
        * (2) feature
        *   console 分别会输出 topjson 以及 geojson 的结果。
        *   所以在定义 feature() 参数是会考虑到：
        *   TopoJSON 对象中，有数组 arcs（共享边）、objects（存储几何对象）、 之后对象中有一个 china 对象，所以保存中国地图的几何体，因此：
        *       topojson.feature(toporoot,toporoot.objects.china)
     */
    var georoot = topojson.feature(toporoot,toporoot.objects.china);
    console.log(georoot)

    var groups = svg.append("g")
    groups.selectAll("path")
        .data(georoot.features)
        .enter()
        .append("path")
        .attr("class","province")
        .style("fill", function (d,i) {
            return color[i]
        })
        .attr("d",path)
})

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,19])
    .scale(600)
    .translate([padding.width/2,padding.height/2])

var color = d3.scale.category20b()

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

d3.json("./china_topo.json", function (error, toporoot) {
    if (error)
        return console.error(error)
    console.log(toporoot)
    /*
        * (1)
        *   将 TopoJSON 转换为 GeoJSON 并保存在 Georoot 中。
        *   Feature 主要用于返回 GeoJSON 的特征（Feature）或特征集合（FeatureCollection）
        *   feature(topology, object) 第一额参数表示 TopJSON 文件对象，第二个参数来表示出几何体的对象。
        * (2) feature
        *   console 分别会输出 topjson 以及 geojson 的结果。
        *   所以在定义 feature() 参数是会考虑到：
        *   TopoJSON 对象中，有数组 arcs（共享边）、objects（存储几何对象）、 之后对象中有一个 china 对象，所以保存中国地图的几何体，因此：
        *       topojson.feature(toporoot,toporoot.objects.china)
     */
    var georoot = topojson.feature(toporoot,toporoot.objects.china);
    console.log(georoot)

    /*
        * (1) 创建集合
        *   通过 d3.set 创建集合，southeast 包含了各省名称之后通过使用 southeast.has() 来检查传入字符串是否在集合中，合并后保存并输出。
        * (2) 数据绘制
        *   将 southeast 内设置为黑色，之后使用 datum()来绑定数据通过 svg.path 进行绘制。
        * (3) 数据合并
        *   之后通过使用 topojson.merge() 来进行合并，每一项保存一个省的几何信息，之后通过对象的 filter() 函数
        *   只有在集合中的省份保存至 mergedPolygon 中。
     */
    var southeast = d3.set([
        "广东省","海南省","台湾省","北京市","吉林省","黑龙江省"
    ])
    var mergedPolygon = topojson.merge(toporoot,
        toporoot.objects.china.geometries.filter(function (d) {
            return southeast.has(d.properties.name)
        }))
    console.log(mergedPolygon)

    var groups = svg.append("g")

    groups.selectAll("path")
        .data(georoot.features.filter(function (d) {
            return !southeast.has(d.properties.name)
        }))
        .enter()
        .append("path")
        .attr("class","province")
        .attr("d",path)

    svg.append("path")
        .datum(mergedPolygon)
        .attr("class","province")
        .style("fill","#c6c6c6")
        .attr("d",path)
})

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,19])
    .scale(600)
    .translate([padding.width/2,padding.height/2])

var color = d3.scale.category20b()

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

d3.json("./china_topo.json", function (error, toporoot) {
    if (error)
        return console.error(error)
    console.log(toporoot)
    /*
        * (1)
        *   将 TopoJSON 转换为 GeoJSON 并保存在 Georoot 中。
        *   Feature 主要用于返回 GeoJSON 的特征（Feature）或特征集合（FeatureCollection）
        *   feature(topology, object) 第一额参数表示 TopJSON 文件对象，第二个参数来表示出几何体的对象。
        * (2) feature
        *   console 分别会输出 topjson 以及 geojson 的结果。
        *   所以在定义 feature() 参数是会考虑到：
        *   TopoJSON 对象中，有数组 arcs（共享边）、objects（存储几何对象）、 之后对象中有一个 china 对象，所以保存中国地图的几何体，因此：
        *       topojson.feature(toporoot,toporoot.objects.china)
     */
    var georoot = topojson.feature(toporoot,toporoot.objects.china);
    console.log(georoot)

    /*
        * (mesh)
        *   topojson.mesh 主要提供了 网格花 TopoJSON 几何形状以形成多边形。
        *   分别提取了内蒙古、黑龙江省的边界线，边界线最终存储在 boundary 中。
     */
    var boundary = topojson.mesh(toporoot ,toporoot.objects.china, function (a,b) {
        return a.properties.name === "内蒙古自治区" && b.properties.name === "黑龙江省"
    })
    console.log(boundary)
    var groups = svg.append("g")

    groups.selectAll("path")
        .data(georoot.features)
        .enter()
        .append("path")
        .attr("class","province")
        .attr("d",path)

    svg.append("path")
        .datum(boundary)
        .attr("class","boundary")
        .style("fill","none")
        .attr("d",path)
})

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,19])
    .scale(600)
    .translate([padding.width/2,padding.height/2])

var color = d3.scale.category20b()

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

d3.json("./china_topo.json", function (error, toporoot) {
    if (error)
        return console.error(error)
    console.log(toporoot)
    /*
        * (1)
        *   将 TopoJSON 转换为 GeoJSON 并保存在 Georoot 中。
        *   Feature 主要用于返回 GeoJSON 的特征（Feature）或特征集合（FeatureCollection）
        *   feature(topology, object) 第一额参数表示 TopJSON 文件对象，第二个参数来表示出几何体的对象。
        * (2) feature
        *   console 分别会输出 topjson 以及 geojson 的结果。
        *   所以在定义 feature() 参数是会考虑到：
        *   TopoJSON 对象中，有数组 arcs（共享边）、objects（存储几何对象）、 之后对象中有一个 china 对象，所以保存中国地图的几何体，因此：
        *       topojson.feature(toporoot,toporoot.objects.china)
     */
    var georoot = topojson.feature(toporoot,toporoot.objects.china);
    console.log(georoot)

    var neighbors = topojson.neighbors(toporoot.objects.china.geometries)
    console.log(neighbors)

    var groups = svg.append("g")

    var paths = groups.selectAll("path")
        .data(georoot.features)
        .enter()
        .append("path")
        .attr("class","province")
        .attr("d",path)

    /*
        * 通过使用 neighbors 来计算出相邻数据
        * 并通过为没一个元素添加相邻省份的选择集
        * 为每个选择时添加 behavior 事件，持续时间分别为 2000ms
     */
    paths.each(function (d,i) {
        d.neighbors = d3.selectAll(
            neighbors[i].map(function (j) {
                return paths[0][j]
            })
        )
    })
        .on("mouseover", function (d,i) {
            d3.select(this)
                .transition()
                .duration(2000)
                .style("fill","#9f9d9d")
            d.neighbors
                .transition()
                .duration(2000)
                .style("fill","#d8d8d8")

        })
        .on("mouseout",function (d,i) {
                d.neighbors.style("fill","white")
                    .transition()
                    .duration(2000)
        })

})