javascript - 为什么添加谷歌地图会使 d3.js 刷重绘在 Debug模式之外崩溃？

Question

我正在尝试将 d3.js 画笔和谷歌地图结合起来。我有一张 map 、3 个控制 d3 画笔的按钮(实际上是我的时间线)以及 d3 画笔本身。

按钮负责移动画笔，如果我不将 map 添加到页面，它们就会移动画笔。如果我将 map 添加到页面，则在启用 js 调试器(firebug 或 chrome 调试器)时，播放和停止功能将起作用。但是当我关闭调试器时，画笔不会重画。它的范围将被更新(我通过 alert(brush_control.extent()[0]) 检查它)，但它仍然保持在操作(播放或停止)之前的位置。

控制台没有异常或错误。

这是完成这项工作的脚本:

<script>
(function(){
    var is_playing = false,
        paddingLeft = 10,
        paddingRight = 10,
        paddingBottom = 5;
        width = $(window).width() - $("#controls").width() - paddingLeft - paddingRight,
        timeline_height = 100,
        map_height = $(window).height() - timeline_height - paddingBottom,
        my_data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        brush_control = NaN;
    $("#map").height(map_height);

    // Remove the map below and everything works fine
    var map = new google.maps.Map(d3.select("#map").node(), {
      zoom: 8,
      center: new google.maps.LatLng(-14.235004,-51.92528),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });     

    var timeline_svg = d3.select("#timeline").append("svg:svg")
                         .attr("class", "tl")
                         .attr("width", width)
                         .attr("height", timeline_height);

    brush_control = d3.svg
                      .brush()
                      .x(d3.scale
                           .linear()
                           .domain([0, my_data.length])
                           .range([0, width])
                        )
                      .extent([0,1])
                      .on("brush", brush);

    var brush_svg = timeline_svg.append("g")
                                .attr("class", "brush")
                                .call(brush_control)
                                .selectAll("rect")
                                .attr("height", timeline_height);

    $("#playbtn")[0].addEventListener("click", play_event);
    $("#pausebtn")[0].addEventListener("click", pause);
    $("#stopbtn")[0].addEventListener("click", stop);

    function play_event(){
        if(is_playing != true){
            is_playing = true;
            play();
        }
    }
    function play(){
        var delay = 100;
        setTimeout(function(){
                        var ex = brush_control.extent();
                        if(is_playing && ex[0   ] < my_data.length - 1){
                            d3.select("g").transition()
                                     .duration(delay)
                                     .call(brush_control.extent([ex[1], ex[1] + 1]));
                            ex = brush_control.extent();
                            play();
                        }
                   }, delay);
    }
    function pause(){
        is_playing = false;
    }

    function stop(){
        is_playing = false;
        d3.select("g")
          .transition()
          .duration(1000)
          .call(brush_control.extent([0, 1]))
          .call(brush_control.event);
    }

    function brush() {
        var s = d3.event.target.extent();
        data_index = Math.floor(s[0]);
        if (s[1]-s[0] != 1) {
            d3.event.target.extent([s[0], s[0] + 1]);
            d3.event.target(d3.select(this));
        }
    }
}());
</script>

Answer 1

问题是行 d3.select("g").transition() 没有选择您期望的内容，而是从谷歌地图插入的代码中选择的内容。如果你检查 DOM 元素，你会发现插入了一些 SVG 代码，例如:

<svg version="1.1" overflow="hidden" width="78px" height="78px" viewBox="0 0 78 78" style="position: absolute; left: 0px; top: 0px;">
<circle cx="39" cy="39" r="35" stroke-width="3" fill-opacity="0.2" fill="#f2f4f6" stroke="#f2f4f6"></circle>
<g transform="rotate(0 39 39)"><rect x="33" y="0" rx="4" ry="4" width="12" height="11" stroke="#a6a6a6" stroke-width="1" fill="#f2f4f6"></rect><polyline points="36.5,8.5 36.5,2.5 41.5,8.5 41.5,2.5" stroke-linejoin="bevel" stroke-width="1.5" fill="#f2f4f6" stroke="#000"></polyline>
</g>
</svg>

因此，将选择更改为

d3.select("g.brush").transition()

可以解决这个问题。