CODEWITHSUNDEEP
javascriptd3.jssvg
Asia
Asia

Reputation: 183

Access to svg from D3 library

So I have an SVG image(3 circles) generated from data with D3 library.

var myData = [1,2,3];
var svgViewport = d3.select("body").append("svg").attr("width","600").attr("height","600"); 
var circleSelection = svgViewport.selectAll("circle").data(myData); 
var circleElements = circleSelection.enter().append("circle");

circleElements.attr("cx",function(d,i) { 
    return d * 100; 
})
    .attr("cy",function(d,i) { 
        return d * 50; 
    })
    .attr("r","35");

function greenBlue(d,i) {
    if (i % 2 === 0) { 
        return "green"; 
    }
    else { 
        return "blue"; 
    };
}

greenBlue(1,2);
var circleStyle = circleElements.style("fill",greenBlue);

I want to when I mouse over an element it will change color. I know how to do it when elements are in HTML file, but I want to know how it 

document.getElementById("info").onmouseover = function() {
mouseOver()};

can be replaced in this case.

Upvotes: 0

Views: 52

Answers (1)

tmcw
tmcw

Reputation: 11882

Sure, start by reading the d3 documentation on event handling, which will bring you to the documentation for the .on method. So, if you'd like to change the color on mouseover, you'd use on, and this:

circleElements.on("mouseover", function() {
  d3.select(this).style("fill", "green");
});

This example is nearly verbatim the example in the documentation.

Upvotes: 1

Related Questions