Question

我在d3中有这张地图

http://107.170.20.64/

使用自定义投影和路径呈现topojson，如此

var projection = d3.geo.mercator().translate([width / 2, height / 2]).scale(width * 185).center([-89.99, 29.975]);
var path = d3.geo.path().projection(projection);

我正在尝试对其进行调整，以便使用Bostock的tutorial进行平移和缩放。这是topojson加载后触发的函数（显示我对Bostock方法的改编）：

   function ready(error, us) {
        var zoom = d3.behavior.zoom()
            .translate([0, 0])
            .scale(1)
            .scaleExtent([1, 8])
            .on("zoom", zoomed);

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

        features.append("g")
            .attr("class", "precincts")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.orleansgeojson).features)
            .enter().append("path")
            .attr("class", (function(d) {
                return wards.get(d.id) + " precinct";
            }))
            .attr("title", (function(d) {
                return votesone.get(d.id) + "-" + votestwo.get(d.id);
            }))
            .attr("id", function(d) {
                return d.id;
            })
            .attr("d", path);

        svg.append("rect")
            .attr("class", "overlay")
            .attr("width", width)
            .attr("height", height)
            .call(zoom);

        function zoomed() {
            features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            features.select(".precinct").style("stroke-width", 1.5 / d3.event.scale + "px");
        }

不知何故，缩放从未被调用过。如果我在缩放时设置断点，它永远不会捕获。我认为svg的最后附加调用zoom，它以某种方式设置d3 behavior，为鼠标事件创建监听器并调用缩放功能。这就是我到目前为止所了解的事情（澄清或详细的答案会很棒）。是听众没有设置的问题？如果是这样，我该如何调试他们为什么没有设置？叠加层显示在我的svg中 - 它似乎没有拾取鼠标事件。

Answer 1

您的案例中的问题与缩放行为无关。您将包含地图的z-index的{{1}}设置为-1。这意味着它位于包含div 的后面，它会获取所有鼠标事件。因此地图被遮盖了＃34;由包含它的元素组成。

要修复此问题，请将地图div的{{1}}设置为高于-1，或者设置所有包含元素的z-index（包括div ）为-1或更低。

无法平移和缩放我的d3地图

1 个答案: