Databases
StackOverflow2013
Postsdbo
POD3.js Chord diagram - Have text appear/disappear when hovering over an arc
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3.js Chord diagram - Have text appear/disappear when hovering over an arc
    primarykey
    data
    text
    <p>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)</p> <p>However, I cannot get the text to change or even disappear using the mouse event functions.</p> <p>I've tried copying the <code>fade</code> function at the end in: <a href="http://bl.ocks.org/mbostock/4062006" rel="nofollow">http://bl.ocks.org/mbostock/4062006</a> into a <code>fadeOver</code> and <code>fadeOut</code> and adjusting the event functions to</p> <pre><code>.on("mouseover", fadeOver(.1)) .on("mouseout", fadeOut(1)); </code></pre> <p>Inside the <code>fadeOver</code> 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 <code>fade</code></p> <pre><code>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 &amp;&amp; d.target.index != i; }) .transition() .style("stroke-opacity", opacity) .style("fill-opacity", opacity); }; }//fadeOver </code></pre> <p>And I added a similar piece of code to <code>fadeOut</code></p> <pre><code>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 &amp;&amp; d.target.index != i; }) .transition() .style("stroke-opacity", opacity) .style("fill-opacity", opacity); }; }//fadeOut </code></pre> <p>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)</p> <p>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</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVividD
    1. USnadieh
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload