如何使用D3在鼠标悬停时对图像进行模糊处理？

Question

我正在使用D3，并希望在鼠标悬停时使图像模糊。

我在图像后面放置了一个rect元素，并在图像上设置了pointer-events:none，而在rect上设置了pointer-events:all。这可以很好地捕获mouseover事件，但我无法使图像变模糊。

以下是我设置图像及其rect元素的D3代码：

var newImages = images.enter()
   .append("g")
   .attr("class", "image");

newImages.append("svg:image")
  .attr('class', 'image-body')
  .attr('x', 0).attr('y', 20)
  .attr("xlink:href", function(d, i) {
    return "http://placekitten.com/150/200";
  });

newImages.append("rect")
  .attr('class', 'image-background')
  .attr('x', 0).attr('y', 20);

还有不起作用的CSS：

.image-background {
    stroke: black;
    stroke-width: 1px;
    fill: none;
    cursor: pointer;
    pointer-events: all;
    width: 150px;
    height: 200px;
}
.image-background:hover {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}
.image-body {
    pointer-events:none;
    width: 150px;
    height: 200px;
}

如果我将 fill: blue 添加到 image-background: hover 中，那么它就可以正常显示。是否可能改为添加模糊滤镜？这是我的 JSFiddle：https://jsfiddle.net/p4bfsvw9/2/。

- Richard

---

我们能不能像这样使图像模糊 d3.select('.image-body').transition().duration(2000).style("opacity", 0);，就像这个例子 https://jsfiddle.net/3bwujq71/。 - Cyril Cherian

@ Cyril 这会降低不透明度，但不会模糊...我想这可以作为备选方案，谢谢。 - Richard

Answer 1

你可以使用SVG滤镜。 创建滤镜：

 var filter = svg.append("defs")
      .append("filter")
      .attr("id", "blur")
      .append("feGaussianBlur")
      .attr("stdDeviation", 1); 

使用过滤器：

newImages.on("mouseover",function(){
        d3.select(this).select("image").attr("filter", "url(#blur)");
      })
      .on("mouseout",function(){
        d3.select(this).select("image").attr("filter", null);
      });

参考: http://www.w3schools.com/svg/svg_fegaussianblur.asp

这是一个关于 SVG 中高斯模糊的教程。高斯模糊是一种图像处理技术，可以使图像变得更加柔和、模糊。在 SVG 中，我们可以使用 <feGaussianBlur> 元素来实现高斯模糊效果。

var data = [{
  id: 1
}];

var svg = d3.select(".container")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .append("g")
  .attr("transform", "translate(10,10)");

var filter = svg.append("defs")
  .append("filter")
  .attr("id", "blur")
  .append("feGaussianBlur")
  .attr("stdDeviation", 1);

var images = svg.selectAll(".image")
  .data(data, function(d) {
    return d.id;
  });

var newImages = images.enter()
  .append("g")
  .attr("class", "image");

newImages.append("svg:image")
  .attr('class', 'image-body')
  .attr('x', 0)
  .attr('y', 20)
  .attr("xlink:href", function(d, i) {
    return "http://placekitten.com/150/200";
  })

newImages.on("mouseover",function(){
    console.log(this);
    d3.select(this).select("image").attr("filter", "url(#blur)");
  })
  .on("mouseout",function(){
    d3.select(this).select("image").attr("filter", null);
  });

newImages.append("rect")
  .attr('class', 'image-background')
  .attr('x', 0).attr('y', 20);

newImages.append("rect")
  .attr('class', 'image-text-background')
  .attr('x', 0).attr('y', 30);

newImages.append("text")
  .attr('class', 'image-text')
  .attr('x', 0).attr('y', 50)
  .text('hello, kitty');

.image-background {
  stroke: black;
  stroke-width: 1px;
  fill: none;
  cursor: pointer;
  pointer-events: all;
  width: 150px;
  height: 200px;
}
.image-body {
  pointer-events: none;
  width: 150px;
  height: 200px;
}
.image-text-background {
  fill: white;
  width: 75px;
  height: 30px;
  opacity: 0;
}
.image-text {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="container">
</div>

- Gilsha