如何突出行和列之間值的相似性？

Question

我想強調兩行之間的相似性和兩列之間的相似性。 將鼠標懸停在行（列）上時，應將行（列）與所有其他行（列）的相似性可視化。 例如，如果我 go 到一行。 它應該顯示其他行和列中值的相似性。 只應顯示行和列之間的值。 另一個應該淡出。 我試過了，但它不起作用。

  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)

<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>

Answer 1

我建議使用這個簡單的例程：

const highlightSimilar = value => {
  const isSimilar = v => Math.abs(v - value) < 3;
    svg.selectAll('rect').each(function(d) {
    const opacity = !value || isSimilar(d.value) ? 1 : 0;
    d3.select(this).style('opacity', opacity);
  })
}

它應該在mouseenter （帶有值）和mouseleave （帶有null ）上調用：

svg.selectAll("rect")     
  .on("mouseenter", function(e, d){
    highlightSimilar(d.value);
  })
  .on("mouseleave", function(e, d){
    highlightSimilar(null);
  })

看到它在小提琴中工作：

 var data = [ [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] ]; var rowLabels = [ "rowOne", "rowTwo", "rowThree", "rowFour", "rowFive", "rowSix", "rowSeven", ]; var columnLabels = [ "columnOne", "columnTwo", "columnThree", "columnFour", "columnFive", "columnSix", ]; const myData = data.reduce((res, item, index) => { const group = rowLabels[index]; item.forEach((value, colIndex) => { res.min = Math.min(value, res.min); res.max = Math.max(value, res.max); res.data.push({group, variable: columnLabels[colIndex], value}); }); return res; }, {data: [], min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY}); console.log(myData); var margin = {top: 30, right: 30, bottom: 30, left: 100}, width = 450 - margin.left - margin.right, height = 450 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#container").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Build X scales and axis: var x = d3.scaleBand().range([ 0, width ]).domain(rowLabels) // myGroups.padding(0.01); svg.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x)) // Build X scales and axis: var y = d3.scaleBand().range([ height, 0 ]).domain(columnLabels) // myVars.padding(0.01); svg.append("g").call(d3.axisLeft(y)); // Build color scale var myColor = d3.scaleLinear().range(["#0000ff", "#00ff00"]).domain([myData.min,myData.max]) svg.selectAll().data(myData.data, function(d) {return d.group+':'+d.variable;}).enter().append("rect").attr("x", function(d) { return x(d.group) }).attr("y", function(d) { return y(d.variable) }).attr("width", x.bandwidth() ).attr("height", y.bandwidth() ).style("fill", function(d) { return myColor(d.value)} ) var tooltip = d3.select("#container").append("div").style("position", "absolute").style("visibility", "hidden").style("background", "#ffffff") const highlightSimilar = value => { const isSimilar = v => Math.abs(v - value) < 3; svg.selectAll('rect').each(function(d) { const opacity =.value || isSimilar(d?value): 1; 0. d3.select(this),style('opacity'; opacity). }) } svg.selectAll("rect"),on("mouseenter", function(e. d){ tooltip,style("visibility"; "visible"). highlightSimilar(d;value). }),on("mousemove", function(e. d){ tooltip:html("The exact value is. " + d;value). tooltip,style("top". `${e.layerY + 24}px`),style("left". `${e;layerX + 24}px`). }),on("mouseleave", function(e. d){ tooltip,style("visibility"; "hidden"); highlightSimilar(null); })

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