SVG D3js的發光/閃爍效果

Question

我可以知道是否可以將發光/閃爍效果應用於D3js的SVG。 我想做類似的事情如下所示。

 body { background: black; } .button { background-color: #004A7F; -webkit-border-radius: 10px; border-radius: 10px; border: none; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: Arial; font-size: 20px; padding: 5px 10px; text-align: center; text-decoration: none; } @-webkit-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } } @-moz-keyframes glowing { 0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } } @-o-keyframes glowing { 0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } } @keyframes glowing { 0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } 100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } } .button { -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; } 

 <a class="button" href="#">Click me!</a> <button type="submit" class="button">Click me!</button> 

這種閃爍效果將應用於圓環圖的花瓣。 以下是我的來源。 我試圖在我的代碼中使用相同的邏輯，但效果並未顯示為預期的結果。 請注意，如果我應用於標頭標簽，則會顯示效果。 任何幫助都非常感謝。 謝謝。

 var dataset = [ { name: 'Smooth', percent: 30.00 }, { name: 'Moderation', percent: 30.00 }, { name: 'Congestion', percent: 40.00 } ]; var pie = d3.pie() .value(function(d) { return d.percent }) .sort(null) .padAngle(.03); //padding width (gap between 2 petal) var w = 300,//width of graphics h = 300;//height of graphics var outerRadius = w/2; var innerRadius = 100; var color = d3.scaleOrdinal().range(["#605A4C", "#787341" , "#784D41"]); var arc = d3.arc() .outerRadius(outerRadius) .innerRadius(innerRadius); var svg = d3.select("#chart") .append("svg") .attrs({ width: w, height: h, class: 'shadow glowing'/*for multiple classes can be done it like this*/ }).append('g') .attrs({ transform: 'translate(' + w / 2 + ',' + h / 2 + ')' }); var path = svg.selectAll('path') .data(pie(dataset)) .enter() .append('path') .attrs({ d: arc, class: 'custom-header',/*adding a class*/ fill: function(d, i) { console.log("top i" +i); return color(d.data.name); } }); path.transition() .duration(1000) .attrTween('d', function(d) { var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d); return function(t) { return arc(interpolate(t)); }; }); var restOfTheData = function() { var text = svg.selectAll('text') .data(pie(dataset)) .enter() .append("text") .transition() .duration(200) .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".4em") .attr("text-anchor", "middle") .text(function(d) { return d.data.percent + "%"; }) .styles({ fill: '#fff', 'font-size': '10px' }); var legendRectSize = 20; var legendSpacing = 7; var legendHeight = legendRectSize + legendSpacing; var legend = svg.selectAll('.legend') .data(color.domain()) .enter() .append('g') .attrs({ class: 'legend', transform: function(d, i) { console.log(i); console.log(d); //Just a calculation for x & y position return 'translate(-45,' + ((i * legendHeight) - 40) + ')'; } }); legend.append('rect') .attrs({ width: legendRectSize, height: legendRectSize, rx: 20, ry: 40 }) .styles({ fill: color, stroke: color }); legend.append('text') .attrs({ x: 30, y: 15 }) .text(function(d) { return d; }).styles({ fill: ' #C0C0C0', 'font-size': '16px' }); }; setTimeout(restOfTheData, 1000); 

 body { background-color: #A09383; width: 100%; font-family: 'Roboto', sans-serif; height: 100%; } .widget { position: absolute; /*margin: 0 auto; width: 350px; margin-top: 50px; background-color: #A09383; border-radius: 5px;*/ } .header { background-color: #29384D; height: 40px; color: #929DAF; text-align: center; line-height: 40px; border-top-left-radius: 7px; border-top-right-radius: 7px; font-weight: 400; font-size: 1.5em; text-shadow: 1px 1px #06060d; z-index:10; cursor: move; } .chart-container { padding: 25px; } .shadow { -webkit-filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .5)); filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .5)); } @-webkit-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } @-moz-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } @-o-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } @keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } .custom-header { -webkit-animation: glowing 1500ms infinite !important; -moz-animation: glowing 1500ms infinite !important; -o-animation: glowing 1500ms infinite !important; animation: glowing 1500ms infinite !important; } 

 <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script> <div id="mydiv" class="widget"> <div id="mydivheader" class="header custom-header">Indicator</div> <div id="chart" class="Chart chart-container"></div> </div> 

Answer 1

沒有修改，你的風格不適用於svg路徑。 background-color沒有為svg路徑設置背景顏色， fill確實沒有。 您可以將它添加到您引用背景顏色的每個規則：

@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000  !important; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000  !important; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000  !important; }

  0% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000  !important; }
  50% { fill: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000  !important; }
  100% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000  !important; }
}

 var dataset = [ { name: 'Smooth', percent: 30.00 }, { name: 'Moderation', percent: 30.00 }, { name: 'Congestion', percent: 40.00 } ]; var pie = d3.pie() .value(function(d) { return d.percent }) .sort(null) .padAngle(.03); //padding width (gap between 2 petal) var w = 300,//width of graphics h = 300;//height of graphics var outerRadius = w/2; var innerRadius = 100; var color = d3.scaleOrdinal().range(["#605A4C", "#787341" , "#784D41"]); var arc = d3.arc() .outerRadius(outerRadius) .innerRadius(innerRadius); var svg = d3.select("#chart") .append("svg") .attrs({ width: w, height: h, class: 'shadow glowing'/*for multiple classes can be done it like this*/ }).append('g') .attrs({ transform: 'translate(' + w / 2 + ',' + h / 2 + ')' }); var path = svg.selectAll('path') .data(pie(dataset)) .enter() .append('path') .attrs({ d: arc, class: 'custom-header',/*adding a class*/ fill: function(d, i) { console.log("top i" +i); return color(d.data.name); } }); path.transition() .duration(1000) .attrTween('d', function(d) { var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d); return function(t) { return arc(interpolate(t)); }; }); var restOfTheData = function() { var text = svg.selectAll('text') .data(pie(dataset)) .enter() .append("text") .transition() .duration(200) .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".4em") .attr("text-anchor", "middle") .text(function(d) { return d.data.percent + "%"; }) .styles({ fill: '#fff', 'font-size': '10px' }); var legendRectSize = 20; var legendSpacing = 7; var legendHeight = legendRectSize + legendSpacing; var legend = svg.selectAll('.legend') .data(color.domain()) .enter() .append('g') .attrs({ class: 'legend', transform: function(d, i) { console.log(i); console.log(d); //Just a calculation for x & y position return 'translate(-45,' + ((i * legendHeight) - 40) + ')'; } }); legend.append('rect') .attrs({ width: legendRectSize, height: legendRectSize, rx: 20, ry: 40 }) .styles({ fill: color, stroke: color }); legend.append('text') .attrs({ x: 30, y: 15 }) .text(function(d) { return d; }).styles({ fill: ' #C0C0C0', 'font-size': '16px' }); }; setTimeout(restOfTheData, 1000); 

 body { background-color: #A09383; width: 100%; font-family: 'Roboto', sans-serif; height: 100%; } .widget { position: absolute; /*margin: 0 auto; width: 350px; margin-top: 50px; background-color: #A09383; border-radius: 5px;*/ } .header { background-color: #29384D; height: 40px; color: #929DAF; text-align: center; line-height: 40px; border-top-left-radius: 7px; border-top-right-radius: 7px; font-weight: 400; font-size: 1.5em; text-shadow: 1px 1px #06060d; z-index:10; cursor: move; } .chart-container { padding: 25px; } .shadow { -webkit-filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .5)); filter: drop-shadow( 0px 3px 3px rgba(0, 0, 0, .5)); } @-webkit-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 0% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { fill: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } @-moz-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 0% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { fill: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } @-o-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 0% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { fill: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } @keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 0% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } 50% { fill: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000 !important; } 100% { fill: #B20000; -webkit-box-shadow: 0 0 3px #B20000 !important; } } .custom-header { -webkit-animation: glowing 1500ms infinite !important; -moz-animation: glowing 1500ms infinite !important; -o-animation: glowing 1500ms infinite !important; animation: glowing 1500ms infinite !important; } 

 <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script> <div id="mydiv" class="widget"> <div id="mydivheader" class="header custom-header">Indicator</div> <div id="chart" class="Chart chart-container"></div> </div> 

雖然d3過渡也非常能夠產生這種效果......