Question

我想知道为什么我不能显示地图的城市名称。

在最后一个功能中，它可以console.log的城市名称，但没有显示在页面上。

非常感谢您的回答。

<html>
<head>
<meta charset="utf-8">
<title>中国地图</title>
</head>
<body>
<script src="d3.v3.min.js"></script>
<script>
var width  = 1000;
var height = 1000;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,0)");
//投影函数
var projection = d3.geo.mercator()
    .center([107, 31])//设置中心位置
    .scale(2000)//设置放大比例
    .translate([width/2, height/2]);//设置平移
//地理生成器：根据地理数据生成SVG的path元素的路径值
var path = d3.geo.path()
    .projection(projection);

var color = d3.scale.category20();

d3.json("yunnan.json", function(error, root) {
    if (error)
        return console.error(error);
    // console.log(root.features);

    svg.selectAll("path")
        .data( root.features )
        .enter()
        .append("path")
        .attr("stroke","#000")
        .attr("stroke-width",1)
        .attr("fill","#b6c9f7")
        .attr("d", path )
        .on("mouseover",function(d,i){
            d3.select(this)
                .attr("fill","#778de6");
        })
        .on("mouseout",function(d,i){
            d3.select(this)
                .attr("fill","#b6c9f7");
        })
        .append("text")
        .text(function (d) {
            console.log(d.properties.name);
            return d.properties.name;
        });
 });
</script>
</body>
</html>

Answer 1

这是我对这个问题的解决方案。

await DeleteSelf(cancellationToken).ConfigureAwait(false);

使用d3.js制作地图时如何显示城市名称？

1 个答案: