0

我正在尝试创建一个 d3v4 世界地图——但我的 jsfiddle 不正确——这个例子的来源是从哪里来的——http://bl.ocks.org/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f你 怎么能开始模仿它一个jsfiddle

https://jsfiddle.net/jfeo02s5/

我创建了 tsv 文件的 json 版本

var d = [{
"id": "CHN",
"name": "China",
"population": "1330141295"
},
{
"id": "IND",
"name": "India",
"population": "1173108018"
},
{
"id": "USA",
"name": "United States",
"population": "310232863"
},
{
"id": "IDN",
"name": "Indonesia",
"population": "242968342"
},
{
"id": "BRA",
"name": "Brazil",
"population": "201103330"
}];

//最新的小提琴 https://jsfiddle.net/uLt6deoj/1/

4

1 回答 1

1

如果我明白你的意思，正确地，通过

开始在 jsfiddle 中模拟它

我使用您为 D3 发布的要点创建了一个小提琴，您的小提琴中的问题是您没有正确导入库/数据文件。

更新：未正确包含的文件是：

  1. world_countries.json是一个TopoJSON文件，它基本上是一个 json 格式的拓扑文件。
  2. world_population.tsv, 是制表符分隔的文件，其中包含有关世界国家人口的数据

这两个文件都可以从Natural Earth Data网站下载，您可以获得除人口以外的其他属性，您可以参考Mike Bostock的这篇关于地图数据文件规范化的精彩文章系列。

用于着色结帐fill和opacity属性：

svg.append("g")
  .attr("class", "countries")
  .selectAll("path")
  .data(data.features)
  .enter().append("path")
  .attr("d", path)
  .style("fill", function(d) {
    return color(populationById[d.id]);
  });
  .style('stroke', 'white')
  .style('stroke-width', 1.5)
  .style("opacity", 0.8)

这里fill使用 D3 域、范围和 scaleThreshold 函数创建的以下函数着色的路径：

var color = d3.scaleThreshold()
    .domain([10000, 100000, 500000, 1000000, 5000000, 10000000, 50000000, 100000000, 500000000, 1500000000])
    .range(["rgb(247,251,255)", "rgb(222,235,247)", "rgb(198,219,239)", "rgb(158,202,225)", "rgb(107,174,214)", "rgb(66,146,198)", "rgb(33,113,181)", "rgb(8,81,156)", "rgb(8,48,107)", "rgb(3,19,43)"]);

https://jsfiddle.net/mamounothman/04t6wmya/4/

或者你也可以在这里运行它：

var format = d3.format(",");

// Set tooltips
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
        return "<strong>Country: </strong><span class='details'>" + d.properties.name + "<br></span>" + "<strong>Population: </strong><span class='details'>" + format(d.population) + "</span>";
    })

var margin = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var color = d3.scaleThreshold()
    .domain([10000, 100000, 500000, 1000000, 5000000, 10000000, 50000000, 100000000, 500000000, 1500000000])
    .range(["rgb(247,251,255)", "rgb(222,235,247)", "rgb(198,219,239)", "rgb(158,202,225)", "rgb(107,174,214)", "rgb(66,146,198)", "rgb(33,113,181)", "rgb(8,81,156)", "rgb(8,48,107)", "rgb(3,19,43)"]);

var path = d3.geoPath();

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append('g')
    .attr('class', 'map');

var projection = d3.geoMercator()
    .scale(130)
    .translate([width / 2, height / 1.5]);

var path = d3.geoPath().projection(projection);


var d = [{
        "id": "CHN",
        "name": "China",
        "population": "1330141295"
    },
    {
        "id": "IND",
        "name": "India",
        "population": "1173108018"
    },
    {
        "id": "USA",
        "name": "United States",
        "population": "310232863"
    },
    {
        "id": "IDN",
        "name": "Indonesia",
        "population": "242968342"
    },
    {
        "id": "BRA",
        "name": "Brazil",
        "population": "201103330"
    }
];




svg.call(tip);

queue()
		 .defer(d3.json, "https://gist.githubusercontent.com/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f/raw/a45e8709648cafbbf01c78c76dfa53e31087e713/world_countries.json")
    .defer(d3.tsv, "https://gist.githubusercontent.com/micahstubbs/8e15870eb432a21f0bc4d3d527b2d14f/raw/a45e8709648cafbbf01c78c76dfa53e31087e713/world_population.tsv")
    .await(ready);

function ready(error, data, population) {
    var populationById = {};

    population.forEach(function(d) {
        populationById[d.id] = +d.population;
    });
    data.features.forEach(function(d) {
        d.population = populationById[d.id]
    });

    svg.append("g")
        .attr("class", "countries")
        .selectAll("path")
        .data(data.features)
        .enter().append("path")
        .attr("d", path)
        .style("fill", function(d) {
            return color(populationById[d.id]);
        })
        .style('stroke', 'white')
        .style('stroke-width', 1.5)
        .style("opacity", 0.8)
        // tooltips
        .style("stroke", "white")
        .style('stroke-width', 0.3)
        .on('mouseover', function(d) {
            tip.show(d);

            d3.select(this)
                .style("opacity", 1)
                .style("stroke", "white")
                .style("stroke-width", 3);
        })
        .on('mouseout', function(d) {
            tip.hide(d);

            d3.select(this)
                .style("opacity", 0.8)
                .style("stroke", "white")
                .style("stroke-width", 0.3);
        });

    svg.append("path")
        .datum(topojson.mesh(data.features, function(a, b) {
            return a.id !== b.id;
        }))
        // .datum(topojson.mesh(data.features, function(a, b) { return a !== b; }))
        .attr("class", "names")
        .attr("d", path);
}
.names {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

/* Tooltip CSS */
.d3-tip {
  line-height: 1.5;
  font-weight: 400;
  font-family:"avenir next", Arial, sans-serif;
  padding: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #FFA500;
  border-radius: 1px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {      
  box-sizing: border-box;
  display: inline;
  font-size: 8px;
  width: 100%;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  position: absolute;
  pointer-events: none; 
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}


.details{
  color:white;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.0/d3-tip.js"></script>
</body>
</html>

于 2020-01-26T14:17:26.643 回答