d3.js - 与 d3.js 等效的 svg 过滤器

Question

我从 svg 文件中得到了以下 svg 过滤器：

   <defs>
      <filter height="300%" id="blurfilter" width="300%" x="-1" y="-1">
         <feGaussianBlur result="blurOut" stdDeviation="2.0" />
         <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0" />
         <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3" />
         <feBlend in="SourceGraphic" in2="blurOut3" mode="normal" />
      </filter>
   </defs>

使用 d3.js 实现它的正确方法是什么？

我尝试下面的代码，但看起来不正确：

 svg.append('defs')
    .append('filter')
    .attr('width','300%')
    .attr('id','blurfilter')
    .attr('x',-1)
    .attr('y',-1)
    .append('feGaussianBlur')
    .attr('result','blurOut')
    .attr('stdDeviation',2.0)
    .append('feColorMatrix')
    .attr('id','blurOut')
    .attr('result','blurOut2')
    .attr('type','matrix')
    .attr('values','0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0')
    .append('feOffset')
    .attr('dx',4.0)
    .attr('dy',4.0)
    .attr('in','blurOut2')
    .attr('result','blurOut3')
    .append('feBlend')
    .attr('in','SourceGraphic')
    .attr('in2','blurOut3')
    .attr('mode','normal')

Answer 1

您需要打破链条，目前您正在附加如下：

 svg.append('defs')
    .append('filter')
    ...
    .append('feGaussianBlur')
    ...
    .append('feColorMatrix')
    ...
    .append('feOffset')
    ...
    .append('feBlend')

每次使用 .append() 时，您都会返回追加元素的新选择。因此，您将一个feBlend元素附加到父feOffset元素，而不是过滤器本身。例如：

   <defs>
      <filter height="300%" id="blurfilter" width="300%" x="-1" y="-1">
         <feGaussianBlur result="blurOut" stdDeviation="2.0">
             <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0" >
                 <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3" >
                     <feBlend in="SourceGraphic" in2="blurOut3" mode="normal" />
                 </feOffset>
              </feColorMatrix>
          </feGaussianBlur>
      </filter>
   </defs>

相反，打破链并附加到过滤器的选择：

var filter = svg.append('defs')
  .append('filter')
  .attr(...

filter.append('feGaussianBlur')
  .attr(...

filter.append('feColorMatrix')
  .attr(...

filter.append('feOffset')
   .attr(...

filter.append('feBlend')
   .attr(...

这将为您提供与示例相同的 DOM 结构。