Question

我正在尝试根据本教程应用“feDiffuseLighting和feSpecularLighting”过滤器：https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#filters

我需要光的中心与被绘制的圆一起移动。

我写了下面这段代码的意图是聚光灯的中心是圆圈的中心。但是它绘制了圆圈，但它没有应用光效....：

var svg = d3.select("svg");
svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
        .attr("cx", function(d){return d.x})
        .attr("cy", function(d){return d.y})
        .attr("r", 10)
        .attr("fill","white")
        .append("filter")
        .attr("width", "100%")
        .attr("height", "100%")
        .append("feSpecularLighting")
        .attr("specularExponent","25")
        .attr("lighting-color","yellow")
        .append("fePointLight")
        .attr("x", function(d){return d.x})
        .attr("y", function(d){return d.y})         
        .attr("z","8");

有什么想法吗？

Answer 1

这不是d3中过滤器使用的正确语法。您需要将过滤器元素添加到带有id的defs父级，然后将过滤器属性添加到指向它的circle元素中：

    .attr("filter","url(#light-me")

请参阅其他问题（例如SVG filter using d3 js not working in IE）以了解正确用法

d3错误地将光效应用于圆圈

1 个答案: