CODEWITHSUNDEEP
cssd3.js
VividD
VividD

Reputation: 10536

Transferring all CSS statements to D3 chains in JavaScript - trouble with hover style

I am moving all CSS into inline JavaScript code in this example: jsfiddle. (the purpose is to test a plugin for svg manipulation, that doesn't like CSS from separate files)

I don't know how to transfer this line in CSS:

.link:hover {
    stroke-opacity: .5;
}

to this line in JavaScript:

// add in the links
var link = svg.append("g").selectAll(".link")
.data(graph.links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", path)
.style("fill", "none")
.style("stroke", "black")
.style("stroke-opacity", ".2")
.style("stroke-width", function (d) {
    return Math.max(1, d.dy);
})
.sort(function (a, b) {
    return b.dy - a.dy;
});

Could you help me? Thnx.

Upvotes: 1

Views: 140

Answers (1)

Jonah
Jonah

Reputation: 16222

Updated Fiddle: http://jsfiddle.net/j9yB9/

I simply added these two lines:

.style("stroke-opacity", ".2")
.on("mouseover", function() { d3.select(this).style("stroke-opacity", ".5") } )
.on("mouseout", function() { d3.select(this).style("stroke-opacity", ".2") } )

Upvotes: 1

Related Questions