D3.js Chord diagram - Have text appear/disappear when hovering over an arc

问题

I'm trying to add a small function to the Chord Diagram created by Mike Bostock. When I hover over a certain arc, say Group A, I want a piece of text that I've placed to the right of the chord diagram to update its text to explain some insights that are particular to Group A. When the user moves his/her mouse away from the arc/chord (so all the chords become visible again), I want the text to go back to what it said before (which in my case is a short explanation of how to understand a Chord Diagram)

However, I cannot get the text to change or even disappear using the mouse event functions.

I've tried copying the fade function at the end in: http://bl.ocks.org/mbostock/4062006 into a fadeOver and fadeOut and adjusting the event functions to

.on("mouseover", fadeOver(.1))
.on("mouseout", fadeOut(1));

Inside the fadeOver function I've tried to create a new piece of text to show when you hover over an arc and the chords not selected fade away. Just one line added to the original function fade

function fadeOver(opacity) {

  d3.select("#SideText").html("Updated piece of text");

  return function(d, i) {
    svg.selectAll("path.chord")
        .filter(function(d) { return d.source.index != i && d.target.index != i; })
        .transition()
        .style("stroke-opacity", opacity)
        .style("fill-opacity", opacity);    
  };
}//fadeOver

And I added a similar piece of code to fadeOut

function fadeOut(opacity) {

  d3.select("#SideText").html("Standard text");  

  return function(d, i) {
    svg.selectAll("path.chord")
        .filter(function(d) { return d.source.index != i && d.target.index != i; })
        .transition()
        .style("stroke-opacity", opacity)
        .style("fill-opacity", opacity);
  };
}//fadeOut

However, the text always appears to be "Standard text". Nothing happens when I hover over the chords, the text never seems to change into "Updated piece of text". Can anybody explain to me why not and/or help me how I can achieve what I am trying to do? (I expected to text to be 'empty' after refresh because I have not yet invoked a mouse event, but it says "Standard Text" right after refresh)

I know that the example above is not yet what I want in the end, but perhaps when I get the above to work I can work with chord indices to display a particular piece of updated text

回答1:

The key thing here is that the fade functions return functions themselves. That is, there are two execution scenarios. First, the code of the function itself is executed when the event handlers are assigned (exactly once). Second, the code that actually changes things is executed when the event is triggered (and only then).

You've added your new code in the first execution context. This means that your code is executed exactly once when the handler functions are assigned, not when the events are actually triggered. To achieve what you want, you need to place this code inside the functions that are returned from the fade functions, i.e. below the return function(d, i) line.

来源：https://stackoverflow.com/questions/18784801/d3-js-chord-diagram-have-text-appear-disappear-when-hovering-over-an-arc

标签

javascript

svg

d3.js

data-visualization

chord-diagram