Accepted answer

I modified your example slightly based on the problems you described:

It looks like there are three issues:

  1. Paths draw on top of icon. To fix this, you can change the order of when you add items to the group, or add sub groups to your main g group, ensuring the order that you add the groups matches the order you want things to appear.

  2. The paths between points doesn't zoom when you zoom the map. To fix this, make sure to add everything to the group that you're modifying the clicked() function. In this case, your g group is being zoomed on, so if you add the paths to the g group instead of the svg directly the paths will zoom as well. In the example provided, text does also not zoom in - that's because it's added directly to the SVG and not the g group that is being transformed.

  3. Paths aren't created automatically from the data. To fix this, you can generate an array containing LineString objects from the data. For example,

        for(var i=0, len=data.length-1; i<len; i++){
        // (note: loop until length - 1 since we're getting the next
        //  item with i+1)
                type: "LineString",
                coordinates: [
                    [ data[i].lon, data[i].lat ],
                    [ data[i+1].lon, data[i+1].lat ]

    Then, do the standard data join pattern and pass in the links list to the data. When you pass in path as the d attribute, it will generate a great arc based on the coordinates for each item:

    // Standard enter / update 
    var pathArcs = arcGroup.selectAll(".arc")
            'class': 'arc'
            fill: 'none',
            //d is the points attribute for this path, we'll draw
            //  an arc between the points using the arc function
            d: path
            stroke: '#0000ff',
            'stroke-width': '2px'

In my example ( ) I added a transition on the great arc paths to illustrate how the path is drawn based on the order of coordinate pairs passed into the links object.

Hope that helps!

Related Query