Слои в Svg при применении Drop Shadow

Мне бы хотелось иметь затенение для графика, который я делаю с использованием d3 и SVG, но у меня возникли проблемы с тенями, перекрывающими соседние элементы.
Смотрите изображение ниже, как оно выглядит в настоящее время. Обратите внимание на то, что шестиугольники в середине имеют различную высоту, потому что поверх некоторых из них отображаются тени.

Я хотел бы настроить тени таким образом, чтобы они отображались только на фоне, а не поверх других смежных шестиугольников.

Вот код демонстрирующий, как в настоящее время определяются тени:

var filter = defs.append("filter")
            .attr("id", "drop-shadow")
            .attr("height", "130%");
        // SourceAlpha refers to opacity of graphic that this filter will be applied to
        // convolve that with a Gaussian with standard deviation 3 and store result
        // in blur
        filter.append("feGaussianBlur")
            .attr("in", "SourceAlpha")
            .attr("stdDeviation", 1)
            .attr("result", "blur");
        // translate output of Gaussian blur to the right and downwards with 2px
        // store result in offsetBlur
        filter.append("feOffset")
            .attr("in", "blur")
            .attr("dx", 1)
            .attr("dy", 1)
            .attr("result", "offsetBlur");
        // overlay original SourceGraphic over translated blurred opacity by using
        // feMerge filter. Order of specifying inputs is important!
        var feMerge = filter.append("feMerge");
        feMerge.append("feMergeNode")
            .attr("in", "offsetBlur")
        feMerge.append("feMergeNode")
            .attr("in", "SourceGraphic");

Эти стили затем применяются к шестиугольникам:

d3.select(this).style("filter", "url(#drop-shadow)")