【发布时间】：2018-05-10 05:47:54
【问题描述】：
我想知道是否可以对 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>【问题讨论】：
标签： javascript html d3.js canvas svg