如何将d3“区域”形状显示为此传单地图上的链接，而不是线条？

Question

我正在尝试用this Sankey migration map替换tapered arcs, such as are used here中的行，但是我甚至无法使渐变弧形状出现在与地图相同的div中。 如何用d3.svg.area中的锥形弧替换L.polyline？

以下是我对Sankey地图（上面的codepen链接）所做的代码更改，但没有成功：

    d3.json('http://codepen.io/laissezpasser/pen/RaeKLQ.js', function(error, links) {
    if (error) throw error;

    var weightMin = d3.min(links, function(l) { return l.value }),
        weightMax = d3.max(links, function(l) { return l.value });

    var weightScale = d3.scale.linear()
                .domain([weightMin, weightMax])
                .range([0, 300]);

    links.forEach(function (link) {
        if (link.source != link.target) {

            var path = [ link.source, link.target ].join('-');
            var pathReverse = [ link.target, link.source ].join('-')

            var linkStyle = {
                color: (linkLayers[pathReverse]) ? 'violet' : 'orange',
                weight: weightScale(link.value),
                smoothFactor: 1,
                opacity: .5,
                fill: false,
                class: path                    
            };

            var linkCenter = L.area([ atollLayers[link.source].center, atollLayers[link.target].center ]).getBounds().getCenter();
            if (linkStyle.color == 'violet') {
                var lineCenter = L.latLng(
                    (linkCenter.lat * .001) + linkCenter.lat, 
                    (linkCenter.lng * .001) + linkCenter.lng
                );
            }
            else {
                var lineCenter = L.latLng(
                    linkCenter.lat - (linkCenter.lat * .001), 
                    linkCenter.lng - (linkCenter.lng * .001)
                );
            }

            var link = L.area([ atollLayers[link.source].center, lineCenter, atollLayers[link.target].center ], linkStyle);

            var svg = d3.select("#map").select("svg"),
            g = svg.append("g");

            var area = d3.svg.area()
                .x(function(d) { return d.x; })
                .x0(function(d) { return d.x0; })
                .y0(function(d) { return d.y0; })
                .y1(function(d) { return d.y1; })
                .interpolate("cardinal")
                .tension(0);

            var link = { 
                width: weightScale(link.value),
                offset: link.value / 2 + Math.random(),
                };

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)

            var path = svg.append("path")
                .datum(toArc(link))
                .attr("class", "area")
                .attr("d", area);

            svg.append(atollLayers)
                .attr("x", link.source.center[0])
                .attr("y", link.source.center[1]);

            svg.append(atollLayers)
                .attr("x", link.target.center[0])
                .attr("y", link.target.center[1]);