SVG Drop Shadow Layering

I'd like to have shadowing for a plot I am making using d3 and SVG, but I'm having trouble with the drop shadows overlapping adjacent elements. See the image below for how it currently looks. Notice the hexagons in the middle appear to have varying elevation because shadows are being rendered on top of some of them. What I'd like to do is set up the shadows in such a way that they only render on the background, and not on top of other adjoining hexes.

Here is the code for how the shadows are currently being defined:

      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");

Those styles are then applied to the hexagons:

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