Javascript 如何突出显示行和列之间的值的相似性？

我想强调两行之间的相似性和两列之间的相似性。鼠标悬停在一行（列）上时，应显示行（列）与所有其他行（列）的相似性。例如，如果我去一排。它应该显示其他行和列中值的相似性。只应显示行和列之间的值。另一个应该淡出。我试过了，但不起作用

  svg.selectAll() 
      .data(mapData.data, function(d) {return d.group +':'+ d.variable;})
      .enter()
      .append("rect")
        .attr("x", function(d) { return x(d.variable) })
        .attr("y", function(d) { return y(d.group) })
        .attr("width", x.bandwidth() )
        .attr("height", y.bandwidth() )
        .style("fill", function(d) { return colour(d.value)})
      .on("mouseenter", () => tooltip.style("visibility", "visible"))
      .on("mousemove", (e, d) => {
        tooltip.html("The exact value is: " + d.value);
        tooltip
        .style("top", `${e.layerY + 24}px`)
        .style("left", `${e.layerX + 24}px`)
        .each(function(d){
            if(variable.indexOf(d) != -1)
            d3.select(this).attr("class", "tr");})
      })
      .on("mouseleave", () => tooltip.style("visibility", "hidden"))  
      console.log(mapData)

身体{
利润率：50像素；
字体系列：Arial；
}
tr：悬停{
背景色：#ffa；
}
第一教程

我建议使用这个简单的例程：

const highlightsimple=value=>{
常量相似=v=>Math.abs（v-value）<3；
svg.selectAll（'rect'）。每个（函数（d）{
常数不透明度=！值| |相似（d值）？1:0；
d3.选择（此）.style（'opacity'，opacity）；
})
}

应在

mouseenter

（带值）和

mouseleave

（带

null

）上调用它：

svg.selectAll（“rect”）
.on（“鼠标指针”，功能（e，d）{
高亮度相似（d值）；
})
.on（“鼠标移动”，功能（e，d）{
highlightsimular（空）；
})

看它在小提琴中演奏：

var数据=[
[2.56, 8.52, 4.92, 2.58, 8.44, 2.29],
[7.94, 8.42, 7.71, 7.0, 8.13, 5.63],
[1.38, 3.29, 2.38, 2.85, 1.38, 1.77],
[1.31, 2.48, 1.04, 1.21, 1.83, 1.48],
[1.58, 8.19, 4.75, 3.38, 4.83, 1.46],
[4.48, 4.08, 4.13, 1.73, 1.37, 2.58],
[2.56, 8.52, 4.92, 2.58, 8.44, 2.29]
];
变量行标签=[
“罗文”，
“第二排”，
“第三排”，
“第四排”，
“第五行”，
“第六行”，
“第七行”，
];
变量列标签=[
“第一专栏”，
“第二栏”，
“第三纵队”，
“第四栏”，
“第五栏”，
“第六纵队”，
];
const myData=data.reduce（（res、item、index）=>{
常量组=行标签[索引]；
item.forEach（（值，共索引）=>{
res.min=Math.min（值，res.min）；
res.max=数学max（值，res.max）；
push（{group，variable:columnLabels[colIndex]，value}）；
});
返回res；
}，{data:[]，min:Number.POSITIVE{无穷大，max:Number.NEGATIVE}）；
console.log（myData）；
var margin={顶部：30，右侧：30，底部：30，左侧：100}，
宽度=450-边距。左侧-边距。右侧，
高度=450-边距.顶部-边距.底部；
//将svg对象附加到页面主体
var svg=d3.选择（“容器”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//构建X比例和轴：
var x=d3.scaleBand（）
.范围（[0，宽度]）
.domain（行标签）//myGroups
.填充（0.01）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））
//构建X比例和轴：
变量y=d3.scaleBand（）
.范围（[高度，0]）
.domain（columnLabels）//myVars
.填充（0.01）；
svg.append（“g”）
.调用（d3.左（y））；
//建立色标
var myColor=d3.scaleLinear（）
.范围（[“#0000ff”、“#00ff00”]）
.domain（[myData.min，myData.max]）
svg.selectAll（）
.data（myData.data，函数（d）{return d.group+'：'+d.variable；}）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{return x（d.group）}）
.attr（“y”，函数（d）{返回y（d.variable）}）
.attr（“宽度”，x.带宽（））
.attr（“高度”，y.带宽（））
.style（“fill”，函数（d）{return myColor（d.value）}）
变量工具提示=d3。选择（“容器”）
.附加（“div”）
.style（“位置”、“绝对”）
.style（“可见性”、“隐藏”）
.style（“背景”，“#ffffff”）
const highlightsimple=值=>{
常量相似=v=>Math.abs（v-value）<3；
svg.selectAll（'rect'）。每个（函数（d）{
常数不透明度=！值| |相似（d值）？1:0；
d3.选择（本）
.样式（“不透明度”，不透明度）；
})
}
svg.selectAll（“rect”）
.on（“鼠标指针”，功能（e，d）{
工具提示。样式（“可见性”、“可见”）；
高亮度相似（d值）；
})
.on（“mousemove”，函数（e，d）{
html（“精确值为：”+d.value）；
工具提示
.style（“top”，`e.layerY+24}px`）
.style（“左”，即${e.layerX+24}px`）；
})
.on（“鼠标移动”，功能（e，d）{
工具提示。样式（“可见性”、“隐藏”）；
highlightsimular（空）；
})

如果我理解正确，当项目悬停时，其他项目应以不同方式突出显示。价值越接近的应该越明亮，价值越远的应该越苍白。我说得对吗？是的。示例：选择第一列，然后悬停与所有其他列的相似性。这同样适用于行。你试着想想2列/行“相似”意味着什么，如何计算这种相似性，然后在我的可视化中如何表示这种相似性。所以相似值是一个从当前的增量小于3的值。对吧?对。这就是我想做的。太好了。很高兴能帮上忙：）

<style>
  body {
    margin: 50px;
    font-family: Arial;
  }
  .tr:hover{
  background-color: #ffa;
  }
</style>

  <p>First Tutorial</p>
  <script src="https://d3js.org/d3.v6.js"></script>
  <div id="container"> </id>