Question

我有D3代码在JSON文件中根据弧线制作美国地图。我使用的代码基于此示例（http://bl.ocks.org/mbostock/4108203），其中这是json文件（http://bl.ocks.org/mbostock/raw/4090846/us.json）

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

.land-boundary {
  stroke-width: 1px;
}

.county-boundary {
  stroke: #aaa;
    }

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

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

d3.json("js/us.json", function(error, topology) {
  if (error) throw error;

  svg.append("path")
      .datum(topojson.feature(topology, topology.objects.land))
      .attr("d", path)
      .attr("class", "land-boundary");


  svg.append("path")
      .datum(topojson.mesh(topology, topology.objects.states, function(a, b) { return a !== b; }))
      .attr("d", path)
      .attr("class", "state-boundary");
});

</script>

如何点击地图并返回点击状态的ID？

现在第一个console.log给出了我点击的位置的像素坐标，第二个给出了一个svg对象，并选择了一个父节点。？

d3.select("svg").on("mousedown.log", function() {
          console.log(d3.mouse(this));
          console.log(this);
          console.log(d3.select("id")[0]);
    });

json看起来有一个对象＆＃34;状态＆＃34;用字典包括用于制作地图的弧和与该列表中的状态相对应的状态的id（https://gist.github.com/mbostock/4090846#file-us-state-names-tsv）。我只是无法找出用于隔离对象ID的正确函数。

Answer 1

首先，您要创建一个功能网格，这会将所有功能转换为不包含任何数据的多线串。如果您希望在各个州拥有活动并保留数据，则需要使用.feature代替.mesh

topojson.mesh：

返回表示给定拓扑中指定对象的网格的GeoJSON MultiLineString几何对象。这对于有效地渲染复杂对象中的笔划非常有用，因为多个要素共享的边仅被描边一次。

https://github.com/mbostock/topojson/wiki/API-Reference#mesh

topojson.feature：

返回给定拓扑中指定对象的GeoJSON Feature或FeatureCollection。如果指定的对象是GeometryCollection，则返回FeatureCollection，并且集合中的每个几何都映射到Feature。否则，返回一个功能。

https://github.com/mbostock/topojson/wiki/API-Reference#feature

接下来，您将eventlistener绑定到SVG。如果将它绑定到您正在创建的实际路径，则可以直接访问数据对象，例如他在您的问题评论中提到的Lars：

svg.append("g")
    .selectAll("path")
        .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
        .attr("class", "state-boundary")
        .attr("d", path)
        .style("fill", "red")
        .on('mousedown.log', function (d) {
            console.log(d.id);
        });

如果你想绑定到SVG并访问数据，你可以这样做，但我不推荐它，但只是为了表明它是可能的：

d3.select("svg").on("mousedown.log", function() {
    console.log(d3.event.srcElement.__data__.id);
});

D3地图，点击并从json获取id

1 个答案: