StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFading chords in d3js chord graph
text
Body
copied!<p>I'm a total beginner with d3js, so please be patient if my question looks dumb.</p> <p>I'm trying to reproduce a chord graph like the <a href="http://bl.ocks.org/mbostock/4062006" rel="nofollow">one</a> proposed by Mike Bostock. In the code by Bostock if you go with your mouse on an arc, all the chords that are not involved (as <em>target</em> as well as <em>source</em>) in the arc will fade.</p> <p>I'd like to change it in order to let all the chords fade except the one on which there is a mouse (in order to emphasize one single two-way relationship).</p> <p>I've added a <code>fade_single</code> function that is triggered when the mouse is over a chord:</p> <pre><code>svg.append("g") .attr("class", "chord") .selectAll("path") .data(chord.chords) .enter().append("path") .style("fill", function(d) { return fill(d.target.index); }) .attr("d", d3.svg.chord().radius(r0)) .style("opacity", 1) .on("mouseover", fade_single(0.1)) .on("mouseout", fade_single(1)); </code></pre> <p>The <code>fade_single</code> function follows:</p> <pre><code>function fade_single(opacity) { return function(g, i) { svg.selectAll("g.chord path") .filter(function(d) { //return d.source.index != 0 && d.target.index != 0; }) .transition() .style("opacity", opacity); }; } </code></pre> <p>The problem is that I don't know what to put in the commented line, i.e. to filter out all the relationship that are have not the row and column of the single chord. I've tried to play with the <em>subindexes</em> but the parameter <code>i</code> only gives you the row, so I don't know how to isolate the chord I want to exclude from the fading.</p> <p>Any idea? Any hint?</p> <p>Thank you,</p> <p>Elisa</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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