时间戳

首页 > 解决方案 > d3.js 多系列区域图工具提示

javascript - d3.js 多系列区域图工具提示

问题描述

我有这个多系列面积图，我试图获得正确的值来应用工具提示，但不知道如何。我一直在尝试许多不同的示例来获得在多系列区域图上工作的工具提示，但一直在努力想出一个可行的解决方案。

这是代码的链接：

https://codepen.io/quillcraft/pen/QWgawOY

在纯文本中：

<script src="https://d3js.org/d3.v7.min.js"></script>
<body></body>
<script>
const data = [
  {
    year: "2020",
    Betty: "1",
    Deborah: "67",
    Dorothy: "34",
  },
  {
    year: "2021",
    Betty: "3",
    Deborah: "33",
    Dorothy: "12",
  },
  {
    year: "2022",
    Betty: "2",
    Deborah: "13",
    Dorothy: "45",
  }
];
const columns = ["Betty","Deborah","Dorothy"];
const color = d3.scaleOrdinal(d3.schemeAccent);
const width = 600;
const height = 300;

const parseTime = d3.timeParse("%Y");
const x = d3.scaleTime().range([0, width]).domain(d3.extent(data, d => new Date(d.year).getFullYear()));
const y = d3.scaleLinear().range([height, 0]).domain([0, 100]);

const area = d3.area()
    .x(d => x(d.year))
    .y0(height)
    .y1(d => y(d.value));

const line = d3.line()
    .x(d => x(d.year))
    .y(d => y(d.value));

const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");

columns.forEach((column, i) => {
  const newData = data.map(d => {
    return {
      year: new Date(d.year).getFullYear(),
      value: +d[column]
    };
  });

  svg.append("path")
    .data([newData])
    .attr("class", "area")
    .attr("d", area)
    .attr("fill", color(i))
    .attr("opacity", .5);

  svg.append("path")
    .data([newData])
    .attr("class", "line")
    .attr("d", line)
    .attr("stroke", color(i))
    .attr("stroke-width", 2)
    .attr("fill", "none");
})
</script>

标签： javascriptreactjsd3.jsgraphcharts

解决方案

推荐阅读