javascript - 如何在 d3 v4 中交叉过滤直方图和散点图矩阵？

Question

我正在使用this kind of scatterplot matrix以及 d3 中作为两个 View 的直方图。它们都从同一个 csv 文件获取数据。直方图如下所示(x 轴):

为了刷直方图，我使用下面的代码，类似于 this snippet :

    svg.append("g")
        .attr("class", "brush")
        .call(d3.brushX()
        .on("end", brushed));

    function brushed() {
        if (!d3.event.sourceEvent) return;
        if (!d3.event.selection) return; 
        var d0 = d3.event.selection.map(x.invert),
            d1 = [Math.floor(d0[0]*10)/10, Math.ceil(d0[1]*10)/10];

        if (d1[0] >= d1[1]) {
            d1[0] = Math.floor(d0[0]);
            d1[1] = d1[0]+0.1;
        }

        d3.select(this).transition().call(d3.event.target.move, d1.map(x));
    }

如何链接两个 View ，以便当我刷直方图时，散点图矩阵会将刷过的点显示为红色，而其他点则显示为>灰色？

Answer 1

这可以帮助您入门:

3个html文件:

• 2 用于视觉效果(histogram.html 和 scatter.html)
• 1 将它们保存在 iframe 中(both.html):

依赖关系:

• jQuery(添加到所有 3 个文件)

在both.html中创建包含2个单元格的表格:

向每个单元格添加iframe:

<iframe id='histo_frame' width='100%' height='600px' src='histo.html'></iframe>
<iframe id='scatter_frame' width='100%' height='600px' src='scatter.html'></iframe>

我正在使用这个histogram ，还有这个scatterplot .

添加 linky_dink 函数以调用 scatter.html 中的函数(见下文...):

function linky_dink(linked_data) {
   document.getElementById('scatter_frame').contentWindow.color_by_value(linked_data);
}

在 scatter.html 中将 cell.selectAll 函数更改为:

cell.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("cx", function(d) { return x(d[p.x]); })
        .attr("cy", function(d) { return y(d[p.y]); })
        .attr("r", 4)
        .attr('data-x', function(d) { return d.frequency }) // get x value being plotted
        .attr('data-y', function(d) { return d.year }) // get y value being plotted
        .attr("class", "all_circles") // add custom class 
        .style("fill", function(d) { return color(d.species); });
  }

注意添加的粗体行:

现在，我们的直方图圆圈元素保留了x 和y 值，以及可用于定位的自定义类。

创建 color_by_value 函数:

function color_by_value(passed_value) {
    $('.all_circles').each(function(d, val) { 
    if(Number($(this).attr('data-x')) == passed_value) {
    $(this).css({ fill: "#ff0000" })
    }
    });
}

从上面我们知道这个函数将从父 html 文件的 linky_dink 函数中调用。如果传递的值与圆圈的值匹配，它将被重新着色为#ff0000。

最后，在 histogram.html 文件中查找 brushend() 函数。找到它的位置: d3.selectAll("rect.bar").style("opacity", function(d, i) { .... 并更改为:

d3.selectAll("rect.bar").style("opacity", function(d, i) {
      if(d.x >= localBrushYearStart && d.x <= localBrushYearEnd || brush.empty()) {
      parent.linky_dink(d.y)
      return(1)
      } else {
      return(.4)
      }
    });

现在，除了控制刷涂时的矩形不透明度之外，我们还在 Both.html 文件中调用 linky_dink 函数，从而将任何刷涂的直方图值传递到散点图矩阵上以进行重新着色。

结果:

出于显而易见的原因，这不是最好的解决方案。它仅在刷牙结束时重新着色散点图。它通过横扫所有类别来瞄准圆圈，这是非常低效的。当刷涂离开这些值时，彩色圆圈不会变为无色，因为这会淹没 linky_dink 函数。我想你宁愿不使用 iframe，更不用说 3 个独立的文件了。最后，实际上并不需要 jQuery，因为 D3 提供了所需的功能。但也没有发布解决方案，所以也许这会帮助您或其他人找到更好的答案。