Question

I’m using d3.js and I found this works:

function zoom_in () {
    d3.select(this)
        .select("text")
        .style("font-size","55px");
}
var node = svg.selectAll("g.node")
    .data(json.nodes, function(d) { return d.name;})
    .enter().append("g")
    .on("mouseover", zoom_in);

But this won’t work:

function zoom_in () {
    d3.select(this)
        .select("text")
        .style("font-size","55px");
}
var already_done = 0;
var node = svg.selectAll("g.node")
    .data(json.nodes, function(d) { return d.name;})
    .enter().append("g")
    .on("mouseover", function() {zoom_in();already_done=1;})

However, I want to do something after I invoke zoom_in function.
I don’t want to write another function zoom_in_already_done.

I think the problem is caused by the this variable in zoom_in. Anyone knows how to solve it?

Answer 1

Found a way like this:

function zoom_in (ts) {
    d3.select(ts)
        .select("text")
        .transition()
        .style("fill",function(d) { return color(d.group);})
        .attr("dx",20)
        .style("font-size","55px");
}

Then

.on("mouseover", function() {if (dragging==0){zoom_in(this)}})