D3js：如何讓我的工具提示出現在選擇旁邊？-有解無憂

我正在嘗試為我的熱圖可視化中的每個方塊都有一個工具提示。但是，我無法將其正確放置在游標旁邊。這是發生的事情：

D3js：如何讓我的工具提示出現在選擇旁邊？

我的代碼是這樣的：

const margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 150,
};
const width = 960 - margin.left - margin.right;
const height = 2500 - margin.top - margin.bottom;

let chart = d3
  .select("#chart2")
  .append("div")
  // Set id to chartArea
  .attr("id", "chartArea")
  .classed("chart", true)
  .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   ")");

// Make sure to create a separate SVG for the XAxis
let axis = d3
  .select("#chart2")
  .append("svg")
  .attr("width", width   margin.left   margin.right)
  .attr("height", 40)
  .append("g")
  .attr("transform", "translate("   margin.left   ", 0)");

// Load the data
d3.csv("https://raw.githubusercontent.com/thedivtagguy/files/main/land_use.csv").then(function(data) {
  // console.log(data);
  const years = Array.from(new Set(data.map((d) => d.year)));
  const countries = Array.from(new Set(data.map((d) => d.entity)));
  countries.reverse();
  const x = d3.scaleBand().range([0, width]).domain(years).padding(0.01);

  // create a tooltip
  var tooltip = d3
    // Select all boxes in the chart
    .select("#chart2")
    .append("div")
    .classed("tooltip", true)
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px");

  const mouseover = function(event, d) {
    tooltip.style("opacity", 1);
    d3.select(this).style("stroke", "black").style("opacity", 1);
  };

  const mousemove = function(event, d) {
    tooltip
      .html("The exact value of<br>this cell is: "   d.value)
      // Position the tooltip next to the cursor
      .style("left", event.x   "px")
      .style("top", event.y / 2   "px");
  };

  const mouseleave = function(event, d) {
    tooltip.style("opacity", 0);
    d3.select(this).style("stroke", "none").style("opacity", 0.8);
  };

  const y = d3.scaleBand().range([height, 0]).domain(countries).padding(0.01);

  // Only 10 years
  axis
    .call(d3.axisBottom(x).tickValues(years.filter((d, i) => !(i % 10))))
    .selectAll("text")
    .style("color", "black")
    .style("position", "fixed")
    .attr("transform", "translate(-10,10)rotate(-45)")
    .style("text-anchor", "end");

  chart
    .append("g")
    .call(d3.axisLeft(y))
    .selectAll("text")
    .style("color", "black")
    .attr("transform", "translate(-10,0)")
    .style("text-anchor", "end");

  const colorScale = d3
    .scaleSequential()
    .domain([0, d3.max(data, (d) => d.change)])
    .interpolator(d3.interpolateInferno);

  // add the squares
  chart
    .selectAll()
    .data(data, function(d) {
      return d.year   ":"   d.entity;
    })
    .join("rect")
    // Add id-s
    .attr("id", function(d) {
      return d.year   ":"   d.entity;
    })
    .attr("x", function(d) {
      return x(d.year);
    })
    .attr("y", function(d) {
      return y(d.entity);
    })
    .attr("width", x.bandwidth())
    .attr("height", y.bandwidth())
    .style("fill", function(d) {
      return colorScale(d.change);
      console.log(d.change);
    })
    .style("stroke-width", 4)
    .style("stroke", "none")
    .style("opacity", 0.8)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave);
});

#chart2 .chart {
  width: 960px;
  max-height: 900px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<div id="chart2" class="mx-auto"></div>

我想我知道為什么會發生這種情況。由于我像這樣將tooltipiv附加到chart2div，所有定位都是相對于該 div 發生的，這意味著它不可避免地會低于整個圖表，而不是在它之上：

  // create a tooltip
  var tooltip = d3
    // Select all boxes in the chart
    .select("#chart2")
    .append("div")
    .classed("tooltip", true)
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px");

const mousemove = function(event, d) {
        tooltip
          .html("The exact value of<br>this cell is: "   d.value)
          // Position the tooltip next to the cursor
          .style("left", event.x   "px")
          .style("top", event.y / 2   "px");
      };

但是我還能怎么做呢？我嘗試通過懸停rect元素進行選擇，但沒有奏效。我試圖做類似這樣。

我怎樣才能解決這個問題？

可以在此處找到實時版本

uj5u.com熱心網友回復：

只需添加mousemove功能 .style("position","absolute");并將頂部樣式更改為.style("top", event.y "px")

const margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 150,
};
const width = 960 - margin.left - margin.right;
const height = 2500 - margin.top - margin.bottom;

let chart = d3
  .select("#chart2")
  .append("div")
  // Set id to chartArea
  .attr("id", "chartArea")
  .classed("chart", true)
  .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   ")");

// Make sure to create a separate SVG for the XAxis
let axis = d3
  .select("#chart2")
  .append("svg")
  .attr("width", width   margin.left   margin.right)
  .attr("height", 40)
  .append("g")
  .attr("transform", "translate("   margin.left   ", 0)");

// Load the data
d3.csv("https://raw.githubusercontent.com/thedivtagguy/files/main/land_use.csv").then(function(data) {
  // console.log(data);
  const years = Array.from(new Set(data.map((d) => d.year)));
  const countries = Array.from(new Set(data.map((d) => d.entity)));
  countries.reverse();
  const x = d3.scaleBand().range([0, width]).domain(years).padding(0.01);

  // create a tooltip
  var tooltip = d3
    // Select all boxes in the chart
    .select("#chart2")
    .append("div")
    .classed("tooltip", true)
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px");

  const mouseover = function(event, d) {
    tooltip.style("opacity", 1);
    d3.select(this).style("stroke", "black").style("opacity", 1);
  };

  const mousemove = function(event, d) {
    tooltip
      .html("The exact value of<br>this cell is: "   d.value)
      // Position the tooltip next to the cursor
      .style("left", event.x   "px")
      .style("top", event.y   "px")
      .style("position","absolute");
  };

  const mouseleave = function(event, d) {
    tooltip.style("opacity", 0);
    d3.select(this).style("stroke", "none").style("opacity", 0.8);
  };

  const y = d3.scaleBand().range([height, 0]).domain(countries).padding(0.01);

  // Only 10 years
  axis
    .call(d3.axisBottom(x).tickValues(years.filter((d, i) => !(i % 10))))
    .selectAll("text")
    .style("color", "black")
    .style("position", "fixed")
    .attr("transform", "translate(-10,10)rotate(-45)")
    .style("text-anchor", "end");

  chart
    .append("g")
    .call(d3.axisLeft(y))
    .selectAll("text")
    .style("color", "black")
    .attr("transform", "translate(-10,0)")
    .style("text-anchor", "end");

  const colorScale = d3
    .scaleSequential()
    .domain([0, d3.max(data, (d) => d.change)])
    .interpolator(d3.interpolateInferno);

  // add the squares
  chart
    .selectAll()
    .data(data, function(d) {
      return d.year   ":"   d.entity;
    })
    .join("rect")
    // Add id-s
    .attr("id", function(d) {
      return d.year   ":"   d.entity;
    })
    .attr("x", function(d) {
      return x(d.year);
    })
    .attr("y", function(d) {
      return y(d.entity);
    })
    .attr("width", x.bandwidth())
    .attr("height", y.bandwidth())
    .style("fill", function(d) {
      return colorScale(d.change);
      console.log(d.change);
    })
    .style("stroke-width", 4)
    .style("stroke", "none")
    .style("opacity", 0.8)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave);
});

#chart2 .chart {
  width: 960px;
  max-height: 900px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<div id="chart2" class="mx-auto"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/361244.html

標籤：javascript html css d3.js

上一篇：為元素觸發D3事件

下一篇：使用d3應用Y軸時，會引發錯誤