D3动画单张折线

时间:2015-10-22 04:55:35

标签: d3.js leaflet

我试图使用D3来修复Polyline。 但它没有用。这是我试过的:

    function drawPolyline(x1,y1,x2,y2, tooltip)
    {
        var arr = [];
        arr.push(map.unproject([x1 , y1]));
        arr.push(map.unproject([x2 , y2]));
        var options ={color: 'green', weight: 3,opacity: 0.5, smoothFactor: 1 };
        var polyline = new L.Polyline(arr, options);
        polyline.addTo(map);
        var label =  new L.Label({offset: [-20, -20]});
        label.setContent(tooltip);
        label.setLatLng(polyline.getBounds().getCenter());
        map.showLabel(label);
        d3.select(polyline).transition()
    .duration(350)
    .attr({stroke: "rgb(0, 41, 255)" , fill: "rgb(0, 41, 255)"})
    }

1 个答案:

答案 0 :(得分:0)

您正在L.Polyline实例上使用d3.select,但这不会起作用。它不是SVG路径元素。实际路径元素作为成员属性L.Polyline存储在_path实例中。试试这个:

d3.select(polyline._path).transition().duration(350).attr('stroke', 'rgb(0, 41, 255)')