SVG Drop Shadow Layering

I would like to shade behind the plot that I am doing with d3 and SVG, but I am having problems with overlapping shadows overlapping adjacent elements. Check out the image below to see how it looks at the moment. Note that the hexagons in the middle appear to be different heights because the shadows appear over some of them. What I would like to do is adjust the shadows so that they only appear in the background and not on top of other adjacent hexes.

Here's the code for how shadows are currently 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");

      

        
        
        
      

    

Then these styles are applied to the hexagons:

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