将状态名称添加到 d3.js 中的地图

IT技术 javascript jquery svg d3.js
2021-03-08 11:35:36

我正在使用 albersUSA 投影来显示地图。我想为每个州添加州名。

这是我尝试过的，我可以在源代码中看到状态的名称，但我没有看到它们呈现出来。我究竟做错了什么？

var width = 1060,
height = 600,

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

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", click)
    .on("mousemove", mousemove);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .append("g")
    .attr("id", "states");

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([0, 100]);

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

draw();

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .append("svg:text")
    .text(function(d){
        return d.properties.name;
    })
    .attr("x", function(d){
        return -path.centroid(d)[0];
    })
    .attr("y", function(d){
        return  -path.centroid(d)[1];
    });

  });
}
2个回答

对于任何想知道的人来说，这就是我设法做到的：

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("click", click);

    g.selectAll("text")
    .data(json.features)
    .enter()
    .append("svg:text")
    .text(function(d){
        return d.properties.name;
    })
    .attr("x", function(d){
        return path.centroid(d)[0];
    })
    .attr("y", function(d){
        return  path.centroid(d)[1];
    })
    .attr("text-anchor","middle")
    .attr('font-size','6pt');


  });
}
我如何只返回状态代码并将其存储到变量中？我不一定需要显示任何名称，只需要获取状态代码，以便我可以将其用于其他用途。
2021-04-23 11:35:36

我对您自己提供的答案采取了类似的方法，但我不喜欢“质心”放置所有州名称的位置。例如夏威夷、路易斯安那、密歇根和佛罗里达。因此，我为 dx 和 dy 的状态信息的 json 数据添加了属性，并为绘图功能添加了代码。

这是一些修改状态的示例（删除了坐标以使其更小）：

    {
        "geometry": { "type": "Polygon", "coordinates": [] },
        "type": "Feature",
        "id": "12",
        "properties": { "name": "Florida", "abbr": "FL", "dx": "1em" }
    },
    {
        "geometry": { "type": "MultiPolygon", "coordinates": [] },
        "type": "Feature",
        "id": "15",
        "properties": { "name": "Hawaii", "abbr": "HI", "dx": "1.15em", "dy": "1.25em" }
    },

这是绘制标签的函数部分：

        g.selectAll("text")
            .data(json.features)
            .enter()
            .append("text")
            .attr("transform", function (d) { return "translate(" + path.centroid(d) + ")"; })
            .attr("dx", function (d) { return d.properties.dx || "0"; })
            .attr("dy", function (d) { return d.properties.dy || "0.35em"; })
            .text(function (d) { return d.properties.abbr; });
这是我当时工作的地方的内部代码。不过，状态 json 数据中没有任何敏感信息，所以我确实拥有它。它不在公共存储库中，但这里是状态 json 数据，然后是使用它的 MVC Razor 视图中的片段（如果您不使用 ASP.NET MVC，则需要大量编辑该部分）。糟糕，这里无法粘贴整个文件。我得把它放在某个地方。
2021-04-20 11:35:36
您是否在某个地方的 git repo 中有此 json 数据以供重用？
2021-05-04 11:35:36
其它你可能感兴趣的问题
上一篇计算Javascript中两个日期之间的工作日，假期除外 下一篇在性能问题之前有多少并发 setTimeouts？