Question

我有一个散点图，其中包含从一组常见样本派生的多个变量，这些变量基于下拉框选择进行更新。这是问题here的进一步演变。每个变量的数据点都从嵌套数据集添加到图中，如下所示：

var filtered = nested.filter( function(d) { return d.key == selectValue; });
var update = g.selectAll(".datapoints")
    .data(filtered[0].values);
var enter = update.enter().append("g")
    .attr("class", "datapoints")
    .merge(update)
    .each(function(d, i) {
        var points = d3.select(this).selectAll("circle")
            .data(d.values, function(d) { return (d.Plot); });
         points.enter().append("circle")
            .attr("cy", y(d.key))
            .attr("r", 10) ...

我想为每个变量添加一个平均数据点到图中。可以很容易地获得每个变量的平均值：

var mean = d3.mean(d.values, function(d) { return d.value; });

但我不确定如何将平均数据点添加到图表中。我已尝试将平均数据点插入或附加到points条目选择，该选择在图表第一次加载但不随后加载时有效。我还尝试为平均数据点定义一个新的条目选择，由于我不清楚的原因，它根本不起作用。这样做的最佳方式是什么？

数据点按样本进行颜色编码，因此可以在不同变量之间进行视觉匹配。我想通过使用鼠标悬停功能来更明显地使用鼠标悬停功能，该功能在不同变量中突出显示或链接所有出现的相同样本。目前，鼠标悬停功能仅突出显示悬停在其上的特定数据点，如下所示：

.on("mouseover", function(d) {
    d3.select(this) // and all other occurrences of the same sample?
    .transition
    .attr("r", 15)
})
.on("mouseout", function(d) {
    d3.select(this) // and all other occurrences of the same sample?
    .transition
    .attr("r", 10)
})

如何根据鼠标悬停功能突出显示或链接同一样本的所有实例？这可能是使用.each，如上所述，还是需要一种不同的组织和绘制数据的方式，例如嵌套选择？

完整的例子在这里： http://plnkr.co/edit/GHcMsbGa7SVvbrF4gVDw?p=preview

Answer 1

1）您可以将监听器添加到平均节点。

2）从均值节点捕获其父组。

3）从父节点选择所有圈子或所有具有班级points

的圈子

4）将转换应用于选择。

如下图所示：

      .on("mouseover", function(d) {
        d3.select(this.parentNode) //will select parent group
          .selectAll(".points")//will select all circle classed as points
          .transition()//perform transition on them
          .attr("r", 20)
      })
    .on("mouseout", function(d) {
        d3.select(this.parentNode).selectAll(".points")
          .transition()
          .attr("r", 10)
      });

工作代码here

D3 v4：在多系列散点图中添加平均值并突出显示数据点

1 个答案: