How to change opacity of array data on click d3js

Home / Uncategorized / How to change opacity of array data on click d3js

Question:
I have a number of circles created on the svg using d3.js and I’m using an array of different values for the data. My goal is to have the text value in the data change opacity when the circle is mouseover and mouseout. I’m able to get the text to appear on a hover but I can’t get it to disappear when hovering over another circle. Thank you for taking a look at this.
var width = 850,
height = 805;

var canvas = d3.select(‘#canvas’)
.append(‘svg’)
.attr(‘height’, height)
.attr(‘width’, width);

var circleGroup = canvas.append(‘g’)
.attr(‘height’, height)
.attr(‘width’, width);

circleArray = [
{‘x’:500,’y’:160,’textValue’:’text1′},
{‘x’:510,’y’:407,’textValue’:’text2′},
{‘x’:560,’y’:340,’textValue’:’text3′},
{‘x’:300,’y’:430,’textValue’:’text4′},
{‘x’:95,’y’:610,’textValue’:’text5′},
{‘x’:95,’y’:730,’textValue’:’text6′}
];

circleGroup.selectAll(‘circle’)
.data(circleArray)
.enter().append(‘circle’)
.attr(‘r’,15)
.attr(‘cx’,function(d) {return d.x;})
.attr(‘cy’,function(d) {return d.y;})
.attr(‘fill’,’green’)
.on(‘mouseover’, function(d,i) {
circleGroup.append(‘text’)
.data(circleArray)
.text(function(i) {return d.textValue;})
.attr(‘opacity’, 0)
.attr(‘transform’,’translate(600,660)’)
.transition()
.attr(‘opacity’,1)
.on(‘mouseout’,null);
});


Answer:

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *