Javascript 如何在D3V4中交叉过滤直方图和散点图矩阵？

在

d3

中，我使用和直方图作为两个视图。它们都从相同的

csv

文件获取数据。这就是直方图的样子（x轴）：

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

---

如何链接这两个视图，以便在刷直方图时，散点图矩阵将刷点显示为红色，其他点显示为灰色？

这可以让您开始：

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

3个html文件：

• 2用于视觉效果（histogram.html和scatter.html）
• 1在iFrame（都是.html）中保存它们：

依赖关系：

• jQuery（添加到所有3个文件）

创建包含两个单元格的表格。html：

向每个单元格添加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>

在您的scatter.html中，更改您的单元格。将所有函数选择为：

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值，以及一个自定义类，我们可以使用该类来确定目标

按值创建颜色函数：

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（“不透明”），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)
      }
    });

d3.selectAll（“rect.bar”）.style（“不透明”，函数（d，i）{
如果（d.x>=localBrushYearStart&&d.x这可以让您开始：

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

3个html文件：


2用于视觉效果（histogram.html和scatter.html）
1在iFrame（都是.html）中保存它们：

依赖关系：


jQuery（添加到所有3个文件）

创建包含两个单元格的表格。html：


向每个单元格添加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>

在您的scatter.html中，更改您的单元格。将所有函数选择为：

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值，以及一个自定义类，我们可以使用该类来确定目标

按值创建颜色函数：

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) {
      if(d.x >= localBrushYearStart && d.x <= localBrushYearEnd || brush.empty()) {
      parent.linky_dink(d.y)
      return(1)
      } else {
      return(.4)
      }
    });

d3.selectAll（“rect.bar”）.style（“不透明”，函数（d，i）{
如果（d.x>=localBrushYearStart&&d.x可能是@controlnetic的副本，我不知道这与我的问题有什么关系。我的问题是关于链接，而那是关于填充直方图条的颜色。你说“当我刷直方图时，散点图将显示刷过的点为红色，其他点为灰色？”@控制论是的，我说散点图将显示刷过的点。答案的散点图在哪里？它只回答刷历史图。请参阅答案以了解可能的开始。可能重复的@controlnetic我不知道这与我的问题有什么关系。我的问题是关于链接，而那一个是关于填充his条的颜色togram。你说“当我刷直方图时，散点图将显示刷过的点为红色，其他点为灰色？”@控制论是的，我说散点图将显示刷过的点。该答案的散点图在哪里？它只回答刷过Historogramgotcha。有关可能的开始，请参阅答案。