D3.js和弦图 - 当悬停在弧上时，文本显示/消失 [英] D3.js Chord diagram - Have text appear/disappear when hovering over an arc

问题描述

我正在向Mike Bostock创建的Chord图表添加一个小函数。当我徘徊在某个弧上时，说A组，我想要一个文本，我放置在和弦图的右侧更新其文本，以解释一些特定于A组的见解。当用户移动他/她的鼠标远离弧/和弦（所以和弦变得可见），我想让文本回到之前它说的（在我的情况是一个简短的解释如何理解和弦图） p>

但是，我无法使用鼠标事件函数来更改文本，甚至不会消失。

复制最后的 fade 函数： http：/ /bl.ocks.org/mbostock/4062006 转换为 fadeOver 和 fadeOut 并调整事件函数到

  .on（mouseover，fadeOver（.1））
 .on（mouseout，fadeOut （1））; 
  

在 fadeOver 以创建一个新的文本片段，当您悬停在一个弧上，而未选择的和弦会消失。只有一行添加到原始函数 fade

  function fadeOver ）{
 
 d3.select（＃SideText）。html（更新的文本）; 
 
返回函数（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 
  

我添加了类似的代码到 fadeOut

  function fadeOut（opacity）{
 
 d3。 select（＃SideText）。html（Standard text）; 
 
返回函数（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 
  

但是，文本总是显示为标准文本。当我将鼠标悬停在和弦上时，没有什么发生，文本似乎不会变成更新的文本。任何人可以向我解释为什么不和/或帮助我如何实现我想要做什么？ （我希望文本在刷新后为空，因为我还没有调用鼠标事件，但在刷新后它会显示标准文本）

我知道上面的例子还不是我想要的最后，但也许当我得到上述工作，我可以使用和弦索引显示一个特定的更新文本

解决方案

这里的关键是，淡入淡出函数本身返回函数。也就是说，有两个执行场景。首先，当事件处理程序被分配（恰好一次）时，函数本身的代码被执行。第二，实际改变事物的代码在触发事件时被执行（并且只有那时）。

你在第一个执行上下文中添加了新代码。这意味着，当事件被实际触发时，当处理函数被分配时，您的代码只执行一次。 。要实现你想要的，你需要把这个代码放在从淡入函数返回的函数里面，即 return function（d，i） 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)

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

解决方案

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.

这篇关于D3.js和弦图 - 当悬停在弧上时，文本显示/消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！