d3.js円にドロップシャドウ効果を追加する

Question

d3.js円に影を追加したいと思いますが、やや上手く行っていますが、影は円形ではなく長方形です。

方法私は影

var defs = svg.append("defs"); 
    // create filter with id #drop-shadow 
    // height=130% so that the shadow is not clipped 
    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", 5) 
     .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", 5) 
     .attr("dy", 5) 
     .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"); 


    var nodes = svg.selectAll("circle") 
     .data(data); 

    nodes.enter().append("circle") 
     .attr("class", function (d, i) { return " circle_"+d.sentiment+" circle_"+i}) 
     .attr("cx", function (d) { return d.x; }) 
     .attr("cy", function (d) { return d.x; }) 
     .attr("r", function (d) { return d.radius; }) 
     .style('fill', function(d) { 
     return colors["sentiment"][d["sentiment"]]; 
     }) 
     .style("filter", "url(#drop-shadow)"); 

を追加していしかし、影が矩形に来ている、私の円は常に内部のテキストラベルで動いています。

Answer 1

ここに作業コードスニペットがあります。お役に立てれば。

hereを参照してください。

var svg = d3.select("svg"); 
 
var defs = svg.append("defs"); 
 

 

 
var dropShadowFilter = defs.append('svg:filter') 
 
    .attr('id', 'drop-shadow') 
 
    .attr('filterUnits', "userSpaceOnUse") 
 
    .attr('width', '250%') 
 
    .attr('height', '250%'); 
 
dropShadowFilter.append('svg:feGaussianBlur') 
 
    .attr('in', 'SourceGraphic') 
 
    .attr('stdDeviation', 2) 
 
    .attr('result', 'blur-out'); 
 
dropShadowFilter.append('svg:feColorMatrix') 
 
    .attr('in', 'blur-out') 
 
    .attr('type', 'hueRotate') 
 
    .attr('values', 180) 
 
    .attr('result', 'color-out'); 
 
dropShadowFilter.append('svg:feOffset') 
 
    .attr('in', 'color-out') 
 
    .attr('dx', 3) 
 
    .attr('dy', 3) 
 
    .attr('result', 'the-shadow'); 
 
dropShadowFilter.append('svg:feBlend') 
 
    .attr('in', 'SourceGraphic') 
 
    .attr('in2', 'the-shadow') 
 
    .attr('mode', 'normal'); 
 

 

 
var data = [{ 
 
    sentiment: 5, 
 
    x: 100, 
 
    y: 200, 
 
    radius: 5 
 
}, { 
 
    sentiment: 10, 
 
    x: 250, 
 
    y: 250, 
 
    radius: 15 
 
}]; 
 

 
var nodes = svg.selectAll("circle") 
 
    .data(data); 
 

 
nodes.enter().append("circle") 
 
    .attr("class", function(d, i) { 
 
    return " circle_" + d.sentiment + " circle_" + i 
 
    }) 
 
    .attr("cx", function(d) { 
 
    return d.x; 
 
    }) 
 
    .attr("cy", function(d) { 
 
    return d.x; 
 
    }) 
 
    .attr("r", function(d) { 
 
    return d.radius; 
 
    }) 
 
    .style('fill', "blue") 
 
    .style("filter", "url(#drop-shadow)");

svg { 
 
    background: white; 
 
    border: 2px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width=500 height=500 />

Answer 2

それはあなたのフィルターの寸法はかなり大きくする必要があることはおそらくです（デフォルトの寸法は120％幅/高さであることを覚えている。）のような何か試してみてください：私はように見えることはできません

var filter = defs.append("filter") 
    .attr("id", "drop-shadow") 
    .attr("width", "300%") 
    .attr("height", "300%");