Блог

Я пытаюсь расположить всплывающую подсказку по оси y, используя это:

 .style("top", yyscale(d["Seconds"])   "px");
 

Когда я консольный журнал yyscale (d [«Секунды]) Я вижу, что он возвращает правильные числовые значения, но моя всплывающая подсказка не отображается. Когда я выбираю одно из значений, которое оно возвращает, и ввожу его вместо yyscale (d[«Секунды]), все работает нормально. Я не знаю, что я делаю не так. Я оставлю полный код ниже.

 const AppEngine = () => {
  const [data, setData] = useState([]);

 let width = 800;
 let height = 500;
 let padding = 40;

  const xScale = d3
    .scaleLinear()
    .domain([
     d3.min(data, (d) => d["Year"] - 1),
     d3.max(data, (d) => d["Year"]   1),
     ])
     .range([padding, width - padding]);

  const yscale = d3
    .scaleTime()
    .domain([
      d3.min(data, (d) => new Date(d["Seconds"] * 1000 - 9000)),
      d3.max(data, (d) => new Date(d["Seconds"] * 1000   9000)),
   ])
    .range([padding, height - padding]);

  const yyscale = d3
    .scaleLinear()
    .domain([
      d3.min(data, (d) => d["Seconds"]),
      d3.max(data, (d) => d["Seconds"]),
      ])
    .range([padding, height - padding]);

  const drawDots = () => {
    let tooltip = d3.select("#Tooltip");

d3.select("svg")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("data-xvalue", (d) => d["Year"])
  .attr("data-yvalue", (d) => {
    return new Date(d["Seconds"] * 1000);
  })
  .attr("cx", (item) => {
    return xScale(item["Year"]);
  })
  .attr("cy", (d) => yscale(new Date(d["Seconds"] * 1000)))
  .attr("fill", (d) => (d["Doping"] === "" ? "#7bed9f" : "#ff6b81"))
  .on("mouseover", (item, d) => {
    console.log(yscale(new Date(d["Seconds"] * 1000)));
    tooltip.style("opacity", 0.9);
    tooltip.html(
      "Year: "  
        d["Year"]  
        "<br/>"  
        "Position: "  
        d["Place"]  
        "<br/>"  
        "Dopping Allegation: "  
        (d["Doping"] === "" ? "none" : d["Doping"])
    );
    tooltip
      .style("color", "white")
      .style("left", xScale(d["Year"])   "px")
      .style("top", yyscale(d["Seconds"])   "px");
  })
  .on("mouseout", (item) => {
    tooltip.style("opacity", 0);
  });
 };

  const createAxis = () => {
let xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d"));

let yAxis = d3.axisLeft(yscale);

d3.select("svg")
  .append("g")
  .call(xAxis)
  .attr("transform", "translate(0,"   (height - padding)   ")")
  .style("color", "white");

d3.select("svg")
  .append("g")
  .call(yAxis)
  .attr("transform", "translate("   padding   ", 0)")
  .style("color", "white");
  };

  useEffect(() => {
    async function fetchData() {
      const res = await fetch(
        "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist- 
 data.json"
      );
      const resJson = await res.json();
      setData(resJson);
    }
    fetchData();
    drawDots();
    createAxis();
  });

  return (
    <div style={{ backgroundColor: "#f1f2f6" }}>
      <svg id="svg" width={width} height={height}>
        <text style={{ fill: "white", fontSize: "25px" }} x="275" y="30">
          Doping Allegations In Cyclism
        </text>
      </svg>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <h4>
          Year(x) vs Time(y) <br /> Red: Doping Allegation, Green: No Doping
          Allegations{" "}
        </h4>
      </div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <div id="Tooltip"></div>
      </div>
    </div>
  );
};