javascript - 如何更改 map 上的省份名称？-6ren

javascript - 如何更改 map 上的省份名称？

转载作者：太空宇宙更新时间：2023-11-04 15:42:42

我有一张使用 D3 和 JavaScript 创建的 map 。我想将西类牙省份的名称翻译成另一种语言，例如英语。默认情况下是西类牙语。我更愿意手动进行这些更改，但是，我不知道应该编辑哪个文件。我尝试编辑 hdi.json 和 provincias.json，但它不起作用(我将省份涂成黑色，没有任何标题，就像无法识别一样)。非常感谢任何帮助。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.nombre{
  stroke: #000;
  stroke-width: 0.5px
}
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.provinceNames
{
  font-size: 0.9em;
  font-family: "Lato";
}

.legendLinear
 {
  font-family: "Lato";
  fill:#000000;
}

.legendTitle {
  font-size: 1em;
}
#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 10px;
  width: 200px;
  height: 70px;
  color: white;
  font-family: sans-serif;
  font-size: 1.0em;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  border-radius:5px;
  transition: .2s;
}

</style>
<body>
<div id="container">
  <div id="tooltip">
  </div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicConformalSpain-proj.min.js"></script>
<script>

var width = 1000,
    height = 800;

var projection = d3.geo.conicConformalSpain().scale(width*5).translate([200+width/2, 100+height/2]);
var graticule = d3.geo.graticule().step([2, 2]);

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

var svg = d3.select("#container").append("svg")
    .attr("width", width)
    .attr("height", height);


    svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);

//var g = svg.append("g");

d3.json("provincias.json", function(error, provincias) {
  d3.json("hdi.json", function(error, hdi) {
  var land = topojson.feature(provincias, provincias.objects.provincias);

  var color = d3.scale.threshold()
              .domain([1, 10, 100, 1000, 10000, 100000, 300000])
              .range(["#feebe2","#e5d1ff","#ba93ef", "#8D4CE5","#6100E5","#4d00b7","#C94D8C"]); 

    svg.selectAll(".nombre")
      .data(land.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class","nombre")
      .style("fill",function(d){ return color(hdi[d.properties.nombre]) })
      .on("mouseover", function(d){
        //Show the tooltip
        var x = d3.event.pageX;
        var y = d3.event.pageY - 40;

        d3.select("#tooltip")
          .style("left", x + "px")
          .style("top", y + "px")
          .style("opacity", 1)
          .text( "... " + d.properties.nombre + " ... " + hdi[d.properties.nombre]);
      })
      .on("mouseout", function(){
        //Hide the tooltip
        d3.select("#tooltip")
          .style("opacity", 0);
      });

    svg
      .append("path")
        .style("fill","none")
        .style("stroke","#000")
        .attr("d", projection.getCompositionBorders());

    svg.append("g")
      .attr("class", "provinceNames")
      .selectAll("text")
      .data(land.features)
      .enter()
      .append("svg:text")
      .text(function(d){
        return d.properties.nombre;
      })
      .attr("x", function(d){
          return path.centroid(d)[0];
      })
      .attr("y", function(d){
          return  path.centroid(d)[1];
      })
      .attr("text-anchor","middle")
      .attr('fill', 'black');


    d3.select("svg").append("g")
      .attr("class", "legendLinear")
      .attr("transform", "translate(240,700)");

   var logLegend = d3.legend.color()
       .title("...")
       .shapeHeight(20)
       .shapeWidth(90)
       .shapeRadius(10)
       .labels([0, 10, 100, 1000, 10000, 100000, 300000])
       .orient("horizontal")
       .labelFormat(d3.format(".00f"))
       .labelAlign("start")
       .scale(color);

    svg.select(".legendLinear")
      .call(logLegend);

    });
});


</script>

最佳答案

您似乎正在使用 this JSON西类牙各省。

如果这是正确的，该文件是“provincias.json”，这是名称的路径:

provincias.objects.provincias.geometries[index].properties.nombre

其中 index 是您想要在 geometries 数组中的索引。

查看此演示:

d3.json("https://cdn.rawgit.com/rveciana/5919944/raw//provincias.json", function(provincias) {
  provincias.objects.provincias.geometries.forEach(function(d) {
    console.log(d.properties.nombre)
  })
})

<script src="https://d3js.org/d3.v4.min.js"></script>

关于javascript - 如何更改 map 上的省份名称？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43761271/

文章推荐： c++ - 为什么这个模拟中的摩擦力会使物体以不稳定的方式运行？

文章推荐： c++ - 存储对指针的引用

得到真实外网IP、IP所在国家、省份、地区(小偷程序)
这种方式效率不算高，如果用在WEB中，如果用得少可以用这种方式，如果常用，还是建议用IP库复制代码代码如下: #region##得到真实IP以及所在地详细信息 ///

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何更改 map 上的省份名称？