title: D3: Set filter flood-color based on data
body: <p>I'm attempting to set the filter <code>flood-color</code> within a D3 visualization based on a property in my data. Currently my filter setup looks like so, and works as expected, setting a red <code>flood-color</code>:</p>
  
  <pre><code>var defs = vis.append('defs');
  
      var filter = defs.append('filter')
        .attr('id', 'drop-shadow')
        .attr('height', '130%');
  
      filter.append('feGaussianBlur')
        .attr('in', 'SourceAlpha')
        .attr('stdDeviation', 3)
        .attr('result', 'blur');
  
      filter.append('feOffset')
        .attr('in', 'blur')
        .attr('result', 'offsetBlur');
  
      filter.append("feFlood")
        .attr("in", "offsetBlur")
        .attr("flood-color",'red')
        .attr("flood-opacity", "1")
        .attr("result", "offsetColor");
  
      filter.append("feComposite")
        .attr("in", "offsetColor")
        .attr("in2", "offsetBlur")
        .attr("operator", "in")
        .attr("result", "offsetBlur");
  
      var feMerge = filter.append('feMerge');
  
      feMerge.append('feMergeNode')
        .attr('in', 'offsetBlur')
      feMerge.append('feMergeNode')
        .attr('in', 'SourceGraphic');
  </code></pre>
  
  <p>However, if I change this section to try to set the color based on my data, the data is not defined:</p>
  
  <pre><code>filter.append("feFlood")
    .attr("in", "offsetBlur")
    .attr("flood-color", function(d) {
      if (d.state === 'active') {
        return 'blue';
      } else if (d.state === 'starter') {
        return 'green';
      } else if (d.state === 'suspended') {
        return 'yellow';
      } else if (d.state === 'closed') {
        return 'red';
      }
    })
    .attr("flood-opacity", "1")
    .attr("result", "offsetColor");
  </code></pre>
  
  <p>UPDATE: Link to full example: <a href="http://blockbuilder.org/MattDionis/7f5375d927698f508a01" rel="nofollow">http://blockbuilder.org/MattDionis/7f5375d927698f508a01</a></p>