时间戳

首页 > 解决方案 > 如何突出行和列之间值的相似性？

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)

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

标签： javascriptd3.js

解决方案

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

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(with value) 和mouseleave(with 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"/>

推荐阅读