Question

我正在显示一个带有几个多边形（geojson格式）的简单地图。这些是通过d3.json选项加载的。

我正在尝试使用特定于每个单独多边形的值来获取有关鼠标悬停的警报;

事实是，通过使用我看到的例子，（逻辑上）它将无法工作，因为我对geoJson数据总是有一个idex为0：

function.on("mouseover", function(d,i){ alert(+d3.values(d3.values(d.features[i])[1])[1]); });

因为我总是有i = 0，所以返回的值总是相同的。

我不知何故需要更换索引＆＃34; i＆＃34;在上面发布的警报中，我正在讨论多边形的索引。

我在下面添加了完整的代码。我想要做的是添加旧金山边界，然后在顶部添加一些多边形，我想要显示列中的值的多边形＆＃34; FINAL＆＃34; （这个值与每个多边形不同）。

我还在鼠标悬停上添加了一个函数来改变我正在移动的多边形的颜色，但是它总是会改变所有多边形的颜色，而不仅仅是那个被覆盖的颜色。

<script>
    var svgWidth = 900,
    svgHeight = 900,
    margin = {"top": 25, "right": 25, "bottom": 25, "left": 25},
    width  = svgWidth  - margin.left - margin.right,
    height = svgHeight - margin.top  - margin.bottom;

    var projection = d3.geo.mercator();

    var path = d3.geo.path()
            .projection(projection);
    var svgViewport = d3.select("body").append("svg")
            .attr("width",  width  + margin.left + margin.right)
            .attr("height", height + margin.top  + margin.bottom)
            .style("border", "2px solid");

    // Define Zoom Function Event Listener
    function zoomFunction() {
            d3.selectAll("path")
                    .attr("transform",
                    "translate(" + d3.event.translate
                    + ") scale (" + d3.event.scale + ")");
            }

    // Define Zoom Behavior
    var zoom = d3.behavior.zoom()
            .scaleExtent([0.2, 10])
            .on("zoom", zoomFunction);

    var innerSpace = svgViewport.append("g")
            .attr("class", "inner_space")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .call(zoom);

            d3.json("sf_shore.geojson", function(error, us) {
            state = us
            });

            d3.json("for_stack.geojson", function(error, bldg) {
            buildings = bldg;

            projection
                    .scale(1)
                    .translate([0, 0]);

    var b = path.bounds(state),
            s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
            t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

            projection
                    .scale(s)
                    .translate(t);

    innerSpace.append("g").attr("class", "hidden rectangle")
            .append("rect")
            .attr("class", "background")
            .attr("x", function(d, i) { return 0; })
            .attr("y", function(d, i) { return 0; })
            .attr("width", function(d, i) { return width; })
            .attr("height", function(d, i) { return height; })
            .style("fill", "white");

    innerSpace.append("path")
            .datum(state)
            .attr("class", "mesh")
            .attr("d", path);

    innerSpace.append("path")
            .datum(buildings)
            .attr("class", "meshu")
            .attr("d", path)
            .style("fill", function() { return "teal" })
            .on("mouseover", function(e){d3.select(this).style("fill", "gray")})
            .on("mouseout", function(e){d3.select(this).style("fill", "teal")})
            .attr("stroke","white")
            .attr("stroke-width", 0.2);
    });
</script>

保存我想要显示的信息的数据是＆＃34; for_stack.geojson＆＃34;它看起来像：

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "FINAL": "ID = 0" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -122.408841, 37.807266 ], [ -122.408971, 37.807922 ], [ -122.407742, 37.807404 ], [ -122.408841, 37.807266 ] ] ] } }
,
{ "type": "Feature", "properties": { "FINAL": "ID = 1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -122.402690, 37.801356 ], [ -122.402838, 37.802086 ], [ -122.401890, 37.802206 ], [ -122.401776, 37.801613 ], [ -122.401964, 37.801590 ], [ -122.401938, 37.801453 ], [ -122.402690, 37.801356 ] ] ] } }
,
{ "type": "Feature", "properties": { "FINAL": "ID = 2" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -122.401518, 37.801485 ], [ -122.401660, 37.802229 ], [ -122.400723, 37.802348 ], [ -122.400578, 37.801604 ], [ -122.401518, 37.801485 ] ] ] } }
,
[more features..]

任何人都可以告诉我这是如何工作的吗？

感谢您的时间，

Answer 1

感谢@Lars Kotthoff，我设法找到了两条有用的链接：

http://bost.ocks.org/mike/map/
https://github.com/mbostock/d3/wiki/Geo-Paths

引用：

或者，您可以创建多个不同的路径元素：

svg.selectAll("path")
    .data(features)
    .enter().append("path")
    .attr("d", d3.geo.path());

如何从d3js中的GeoJson对象中的嵌套对象获取值？

1 个答案: