影响d3.js中多个独立图表的交互？ [英] Interactions that affect multiple separate charts in d3.js?

问题描述

我试图在d3.js中创建一个包含两个图表的数据可视化：一个平行轴图和一个水平的颜色条图（我刚刚组成了这个名称，但它基本上是一系列彩色矩形）。平行轴图中的每一行都与彩色条图中的一组矩形相关联。

I'm trying to create a data visualization in d3.js that contains two charts: a parallel-axis plot, and horizontal colorbar chart (I just made up that name, but it's basically a series of colored rectangles). Each line in the parallel-axis plot is associated with a set of rectangles in the colorbar chart.

现在，鼠标悬停在给定行上会突出显示该行，并将鼠标悬停在给定的矩形突出显示该组矩形。我的目标是，当用户鼠标悬停在图表上时，还可以在相对的图表上突出显示相关的线或一组矩形。这似乎是相当简单，如果我生成两个图表具有相同的功能。然而，它将是更整洁（和更多的可重复使用）编码风格给每个图表自己的功能，只是连接它们不知何故。我试图让每个图表内的鼠标悬停函数调用一个函数定义在更高的水平，影响两个图表，但这似乎没有对没有鼠标的图表有任何影响。因为我仍然不觉得我完全理解d3.js如何工作在底层，我真的很想确认这是一个可行的方式来设置我的代码。我的代码很长，很复杂，我只是想要对结构的建议，所以这里是基本的大纲：

Right now, mousing over a given line highlights that line, and mousing over a given rectangle highlights that set of rectangles. My goal is to also highlight the associated line or set of rectangles on the opposite chart anytime the user mouses over either chart. This seems like it would be pretty straightforward if I generated both charts with the same function. However, it would be much neater (and more reusable) coding style to give each chart its own function and just connect them somehow. I tried having each within-chart mouseover function call a function defined at a higher level that affected both charts, but this didn't seem to have any effect on the chart that wasn't moused-over. Since I still don't feel like I fully understand how d3.js works on an underlying level, I'd really like to have confirmation that this is a viable way to set up my code. My code is long and complicated, and I really just want advice on the structure, so here is the basic outline:

function chart1(){
    make chart
    function mouseover(d,i){
         do stuff
         chart1_globalmouseover(d,i);
    }
    chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}

function chart2(){
    make chart
    function mouseover(d,i){
         do stuff
         chart2_globalmouseover(d,i);
    }
    chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}

function chart1_globalmouseover(d,i){
    do stuff in chart 2's mouseover function
}

function chart2_globalmouseover(d,i){
    do stuff in chart 1's mouseover function
}

c1 = chart1();
c2 = chart2();

推荐答案

用于创建它们将为您可能要选择的元素分配ID或类。也就是说，如果图2具有ID foo 的元素，则在图1的元素的鼠标处理程序中，您可以说 d3.select （#foo）。style（stroke，red）。类似于类。

One way to link the two graphs independent of the code used to create them would be to assign IDs or classes to the elements you may want to select. That is, if graph 2 has an element with ID foo, then in a mouse handler for an element of graph 1, you could say d3.select("#foo").style("stroke", "red") for example. Similarly with classes.

这种方法允许你保持代码完全独立。此外，如果您使用类，您可以将相同的类分配给您想要突出显示的事物（例如，表示相同数据的元素）。然后 d3.selectAll（。class）将选择并允许您操纵所有这些。这将适用于任意数量的图形，而不只是两个 - 什么变化只是将被选择的元素的数量。

This approach allows you to keep the code completely separate. Moreover, if you use classes, you can assign the same class to things you would want to highlight together (e.g. elements representing the same data). Then d3.selectAll(".class") would select and allow you to manipulate all of them. This would work for an arbitrary number of graphs, not just two -- what changes is simply the number of elements that will be selected.

这篇关于影响d3.js中多个独立图表的交互？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！