Question

我试图将d3.js画笔和谷歌地图结合起来。我有一个地图，3个按钮来控制d3画笔（实际上是我的时间轴），以及d3画笔本身。

如果我没有将地图添加到页面，按钮负责移动画笔，他们会这样做。如果我将地图添加到页面，则在启用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()

可以解决问题。

为什么添加谷歌地图将崩溃d3.js刷重绘外调试模式？

1 个答案: