Glowing/Flashing Effect on SVG D3js

user_3345915 0
Viewed 1355

May I know is it possible to apply a glowing/flashing effect to a SVG of D3js. I wish to do something similar as shown below. 

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>

And this flashing effect will be applied to the petal of the doughnut chart. Below is my source. I have tried to use the same logic in my code, however the effect doesn't shown as what is being expected. Notice that the effect does shown if I apply to the header tag. Any help is highly appreciate. Thanks.

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>

d3.js svg canvas html javascript
1 Answers

Your style won't work for an svg path without modification. background-color doesn't set a background color for an svg path, fill does. You can add it to each rule where you reference background color:

@-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>

Though d3 transitions are pretty capable of this sort of effect too...

user_71060860
Related