d3：如何为堆积面积图聚焦单独的工具提示？

【问题标题】：d3: how to focus separate tooltips for stacked area chart?d3：如何为堆积面积图聚焦单独的工具提示？
【发布时间】：2022-01-15 10:09:39
【问题描述】：

我正在使用d3.js 创建一个堆积面积图。现在我无法弄清楚 (mousemove) 如何将单独的工具提示集中在相应的图表曲线上。

我正在尝试实现this，但对于堆积面积图。

我在这里创建了一个我的进度沙盒：https://codesandbox.io/s/recursing-carlos-3t0lg

相关代码：

    function mouseMove() {
      d3.event.preventDefault();
      const mouse = d3.mouse(d3.event.target);
      const [xCoord, yCoord] = mouse;
      const mouseDate = x.invert(xCoord);
      const mouseDateSnap = d3.timeDay.floor(mouseDate);
      const bisectDate = d3.bisector((d) => d.date).left;
      const xIndex = bisectDate(data, mouseDateSnap, 0);
      const mouseHours = data[xIndex].hours;
      let demandHours =
        data[xIndex].resourceType === "DMND" ? data[xIndex].hours : "";
      let supplyHours =
        data[xIndex].resourceType === "SPLY" ? data[xIndex].hours : "";

      if (x(mouseDateSnap) <= 0) return;

      svg
        .selectAll(".hoverLine")
        .attr("x1", x(mouseDateSnap))
        .attr("y1", margin.top)
        .attr("x2", x(mouseDateSnap))
        .attr("y2", height - margin.bottom)
        .attr("stroke", "#69b3a2")
        .attr("fill", "#cce5df");

      svg
        .select(".hoverPoint1")
        .attr("cx", x(mouseDateSnap))
        .attr("cy", y(supplyHours))
        .attr("r", "7")
        .attr("fill", "green");
      svg
        .select(".hoverPoint2")
        .attr("cx", x(mouseDateSnap))
        .attr("cy", y(demandHours))
        .attr("r", "7")
        .attr("fill", "yellow");

      const isLessThanHalf = xIndex > data.length / 2;
      const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
      const hoverTextAnchor = isLessThanHalf ? "end" : "start";

      svg
        .selectAll(".hoverText")
        .attr("x", x(mouseDateSnap))
        .attr("y", y(mouseHours))
        .attr("dx", hoverTextX)
        .attr("dy", "-1.25em")
        .style("text-anchor", hoverTextAnchor)
        .text(
          data[xIndex].resourceType === "DMND"
            ? demandHours + "sec"
            : supplyHours + "sec"
        );
    }

    svg.append("line").classed("hoverLine", true);
    svg.append("circle").classed("hoverPoint1", true);
    svg.append("circle").classed("hoverPoint2", true);
    svg.append("text").classed("hoverText", true);
    svg
      .append("rect")
      .attr("fill", "transparent")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", width)
      .attr("height", height);
    svg.on("mousemove", mouseMove);

在上面的代码中，我使用选择 hoverPoint1（显示 SPLY 小时数）和 hoverPoint2（显示 DMND 小时数）创建了 2 个单独的工具提示

预期：
在(mousemove) 上，绿色圆圈应沿蓝色绘制区域的曲线移动，同时黄色圆圈应沿灰色绘制区域的曲线移动。 （请将此视为显示单个区域工具提示https://observablehq.com/@elishaterada/simple-area-chart-with-tooltip 的示例）

谢谢！

function stackedAreaPlot(data) {
  // set the dimensions and margins of the graph
  const margin = {
      top: 10,
      right: 30,
      bottom: 30,
      left: 60
    },
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  const svg = d3
    .select("#stackedAreaPlot")
    .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})`);

  // Add X axis --> it is a date format
  const x = d3
    .scaleTime()
    .domain(d3.extent(data, (d: any) => new Date(d.date)))
    .range([0, width]);
  svg
    .append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x));

  // Add Y axis
  const y = d3.scaleLinear().domain([0, 2000]).range([height, 0]);
  svg.append("g").call(d3.axisLeft(y));

  let sumstat: any = d3
    .nest()
    .key((d: any) => {
      return d.date;
    })
    .entries(data);

  // stacked groups
  const myGroups = ["DMND", "SPLY"];
  const stackedData: any = d3
    .stack()
    // .keys(myGroup)
    .keys(myGroups)
    .value((data: any, key: any) => {
      return data &&
        data.values &&
        data.values.find((d) => d.resourceType === key) ?
        +data.values.find((d) => d.resourceType === key).hours :
        null;
    })(sumstat);

  const color = d3
    .scaleOrdinal()
    .domain(myGroups)
    .range(["#a9b4bc", "#4b6f93"]);

  // Show the areas
  svg
    .selectAll("mylayers")
    .data(stackedData)
    .enter()
    .append("path")
    .style("fill", (d: any) => color(d.key))
    .attr(
      "d",
      d3
      .area()
      .x(function(d: any) {
        return x(new Date(d.data.key));
      })
      .y0(function(d: any) {
        return y(+d[0]);
      })
      .y1(function(d: any) {
        return y(+d[1]);
      })
    );

  // tooltip with hover point and line
  function mouseMove() {
    d3.event.preventDefault();
    const mouse = d3.mouse(d3.event.target);
    const [xCoord, yCoord] = mouse;
    const mouseDate = x.invert(xCoord);
    const mouseDateSnap = d3.timeDay.floor(mouseDate);
    const bisectDate = d3.bisector((d) => d.date).left;
    const xIndex = bisectDate(data, mouseDateSnap, 0);
    const mouseHours = data[xIndex].hours;
    let demandHours =
      data[xIndex].resourceType === "DMND" ? data[xIndex].hours : "";
    let supplyHours =
      data[xIndex].resourceType === "SPLY" ? data[xIndex].hours : "";

    if (x(mouseDateSnap) <= 0) return;

    svg
      .selectAll(".hoverLine")
      .attr("x1", x(mouseDateSnap))
      .attr("y1", margin.top)
      .attr("x2", x(mouseDateSnap))
      .attr("y2", height - margin.bottom)
      .attr("stroke", "#69b3a2")
      .attr("fill", "#cce5df");

    svg
      .select(".hoverPoint1")
      .attr("cx", x(mouseDateSnap))
      .attr("cy", y(supplyHours))
      .attr("r", "7")
      .attr("fill", "green");
    svg
      .select(".hoverPoint2")
      .attr("cx", x(mouseDateSnap))
      .attr("cy", y(demandHours))
      .attr("r", "7")
      .attr("fill", "yellow");

    const isLessThanHalf = xIndex > data.length / 2;
    const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
    const hoverTextAnchor = isLessThanHalf ? "end" : "start";

    svg
      .selectAll(".hoverText")
      .attr("x", x(mouseDateSnap))
      .attr("y", y(mouseHours))
      .attr("dx", hoverTextX)
      .attr("dy", "-1.25em")
      .style("text-anchor", hoverTextAnchor)
      .text(
        data[xIndex].resourceType === "DMND" ?
        demandHours + " hours" :
        supplyHours + " hours"
      );
  }

  svg.append("line").classed("hoverLine", true);
  svg.append("circle").classed("hoverPoint1", true);
  svg.append("circle").classed("hoverPoint2", true);
  svg.append("text").classed("hoverText", true);
  svg
    .append("rect")
    .attr("fill", "transparent")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);
  svg.on("mousemove", mouseMove);
}

var data = [{
    date: "2021-12-10T05:00:00.000Z",
    hours: 388.5421,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-11T05:00:00.000Z",
    hours: 357.17214,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-12T05:00:00.000Z",
    hours: 194.80227,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-12T05:00:00.000Z",
    hours: 24.5,
    resourceType: "DMND"
  },
  {
    date: "2021-12-13T05:00:00.000Z",
    hours: 466.68397,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-13T05:00:00.000Z",
    hours: 48,
    resourceType: "DMND"
  },
  {
    date: "2021-12-14T05:00:00.000Z",
    hours: 591.11745,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-14T05:00:00.000Z",
    hours: 62.75,
    resourceType: "DMND"
  },
  {
    date: "2021-12-15T05:00:00.000Z",
    hours: 631.64018,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-15T05:00:00.000Z",
    hours: 84.73,
    resourceType: "DMND"
  },
  {
    date: "2021-12-16T05:00:00.000Z",
    hours: 175.7,
    resourceType: "DMND"
  },
  {
    date: "2021-12-16T05:00:00.000Z",
    hours: 628.53835,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-17T05:00:00.000Z",
    hours: 240.24,
    resourceType: "DMND"
  },
  {
    date: "2021-12-17T05:00:00.000Z",
    hours: 673.66929,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-18T05:00:00.000Z",
    hours: 256.68,
    resourceType: "DMND"
  },
  {
    date: "2021-12-18T05:00:00.000Z",
    hours: 635.43202,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-19T05:00:00.000Z",
    hours: 634.73701,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-19T05:00:00.000Z",
    hours: 212.44,
    resourceType: "DMND"
  },
  {
    date: "2021-12-20T05:00:00.000Z",
    hours: 604.94103,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-20T05:00:00.000Z",
    hours: 209.76,
    resourceType: "DMND"
  },
  {
    date: "2021-12-21T05:00:00.000Z",
    hours: 618.83085,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-21T05:00:00.000Z",
    hours: 200.78,
    resourceType: "DMND"
  },
  {
    date: "2021-12-22T05:00:00.000Z",
    hours: 580.31758,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-22T05:00:00.000Z",
    hours: 204.78,
    resourceType: "DMND"
  },
  {
    date: "2021-12-23T05:00:00.000Z",
    hours: 231.15,
    resourceType: "DMND"
  },
  {
    date: "2021-12-23T05:00:00.000Z",
    hours: 679.8791100000001,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-24T05:00:00.000Z",
    hours: 654.02485,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-24T05:00:00.000Z",
    hours: 281.28,
    resourceType: "DMND"
  }
];

stackedAreaPlot(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="stackedAreaPlot"></div>

【问题讨论】：

  • 如果您可以为您的代码创建一个minimal reproducible example，最好是在runnable stack snippet 中，这将非常有帮助。这意味着删除 TypeScript 和 Angular 逻辑并修剪任何不相关的内容。这样，我们可以更轻松地回答您的问题，您也更有可能得到一个好的答案！

标签： javascript angular d3.js


【解决方案1】：

我认为您在几个设计决策上都自欺欺人了。第一个问题是您将mouseDateSnap（日期）与data[0].date（仍然是一个字符串）进行比较。你需要安排一个日期。

此外，通过查看堆叠数据，您可以确保始终拥有属于某个点的所有数据，用于所有轨迹。然后，您可以轻松绘制圆圈，还可以为两条迹线绘制工具提示，而不仅仅是一条。

通过使用d3.select().enter()，您可以使该功能适用​​于任意数量的跟踪，并且无需使用.hoverPoint1 和.hoverPoint2 逻辑。

最后，如果您将mouseDateSnap 与bisect 结合使用，您将在轴刻度处绘制点（很好），但y 值会关闭。它将匹配最近绘制点的 y 值。所以圆圈实际上看起来一点也不好看。

function stackedAreaPlot(data) {
  // set the dimensions and margins of the graph
  const margin = {
      top: 10,
      right: 30,
      bottom: 30,
      left: 60
    },
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  const svg = d3
    .select("#stackedAreaPlot")
    .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})`);

  // Add X axis --> it is a date format
  const x = d3
    .scaleTime()
    .domain(d3.extent(data, (d: any) => new Date(d.date)))
    .range([0, width]);
  svg
    .append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x));

  // Add Y axis
  const y = d3.scaleLinear().domain([0, 2000]).range([height, 0]);
  svg.append("g").call(d3.axisLeft(y));

  let sumstat: any = d3
    .nest()
    .key((d: any) => {
      return d.date;
    })
    .entries(data);

  // stacked groups
  const myGroups = ["DMND", "SPLY"];
  const stackedData: any = d3
    .stack()
    // .keys(myGroup)
    .keys(myGroups)
    .value((data: any, key: any) => {
      return data &&
        data.values &&
        data.values.find((d) => d.resourceType === key) ?
        +data.values.find((d) => d.resourceType === key).hours :
        null;
    })(sumstat);

  const color = d3
    .scaleOrdinal()
    .domain(myGroups)
    .range(["#a9b4bc", "#4b6f93"]);

  // Show the areas
  svg
    .selectAll("mylayers")
    .data(stackedData)
    .enter()
    .append("path")
    .style("fill", (d: any) => color(d.key))
    .attr(
      "d",
      d3
      .area()
      .x(function(d: any) {
        return x(new Date(d.data.key));
      })
      .y0(function(d: any) {
        return y(+d[0]);
      })
      .y1(function(d: any) {
        return y(+d[1]);
      })
    );

  // tooltip with hover point and line
  function mouseMove() {
    d3.event.preventDefault();
    const mouse = d3.mouse(d3.event.target);
    const [xCoord, yCoord] = mouse;
    const mouseDate = x.invert(xCoord);

    // Use `sumstat`, not `data`, to get the correct data object for all traces
    const bisectDate = d3.bisector(d => new Date(d.key)).left;
    const xIndex = bisectDate(sumstat, mouseDate);

    // We get the key directly from xVal
    const xVal = new Date(sumstat[xIndex].key);

    if (x(xVal) <= 0) return;

    svg
      .selectAll(".hoverLine")
      .attr("x1", x(xVal))
      .attr("y1", y.range()[0])
      .attr("x2", x(xVal))
      .attr("y2", y.range()[1])
      .attr("stroke", "#69b3a2")
      .attr("fill", "#cce5df");
    
    const isLessThanHalf = xIndex > sumstat.length / 2;
    const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
    const hoverTextAnchor = isLessThanHalf ? "end" : "start";

    // Create a mapping of type (DMND/SPLY) to single and stacked Y values
    const yVals = {
      DMND: { color: "green" },
      SPLY: { color: "yellow" }
    };
    sumstat[xIndex].values.forEach((el) => {
      // Get the single values from `sumstat`
      yVals[el.resourceType].hours = el.hours;
    });
    stackedData.forEach((group) => {
      // Get the cumulative values from `stackedData`
      yVals[group.key].cumulative = group[xIndex][1];
    });    

    let hoverPoints = svg
      .selectAll(".hoverPoint")
      .data(Object.values(yVals));
    
    const newHoverPoints = hoverPoints
      .enter()
      .append("g")
      .classed("hoverPoint", true);
    
    newHoverPoints
      .append("circle")
      .attr("r", 7)
      .attr("fill", d => d.color);
    
    newHoverPoints
      .append("text")
      .attr("dy", "-1.25em");
    
    newHoverPoints
      .merge(hoverPoints)
      .attr("transform", d => `translate(${x(xVal)}, ${y(d.cumulative)})`)
      .select("text")
      .attr("dx", hoverTextX)
      .style("text-anchor", hoverTextAnchor)
      .text(d => `${d.hours || 0}sec`);
  }

  svg.append("line").classed("hoverLine", true);
  svg
    .append("rect")
    .attr("fill", "transparent")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);
  svg.on("mousemove", mouseMove);
}

var data = [{
    date: "2021-12-10T05:00:00.000Z",
    hours: 388.5421,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-11T05:00:00.000Z",
    hours: 357.17214,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-12T05:00:00.000Z",
    hours: 194.80227,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-12T05:00:00.000Z",
    hours: 24.5,
    resourceType: "DMND"
  },
  {
    date: "2021-12-13T05:00:00.000Z",
    hours: 466.68397,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-13T05:00:00.000Z",
    hours: 48,
    resourceType: "DMND"
  },
  {
    date: "2021-12-14T05:00:00.000Z",
    hours: 591.11745,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-14T05:00:00.000Z",
    hours: 62.75,
    resourceType: "DMND"
  },
  {
    date: "2021-12-15T05:00:00.000Z",
    hours: 631.64018,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-15T05:00:00.000Z",
    hours: 84.73,
    resourceType: "DMND"
  },
  {
    date: "2021-12-16T05:00:00.000Z",
    hours: 175.7,
    resourceType: "DMND"
  },
  {
    date: "2021-12-16T05:00:00.000Z",
    hours: 628.53835,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-17T05:00:00.000Z",
    hours: 240.24,
    resourceType: "DMND"
  },
  {
    date: "2021-12-17T05:00:00.000Z",
    hours: 673.66929,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-18T05:00:00.000Z",
    hours: 256.68,
    resourceType: "DMND"
  },
  {
    date: "2021-12-18T05:00:00.000Z",
    hours: 635.43202,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-19T05:00:00.000Z",
    hours: 634.73701,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-19T05:00:00.000Z",
    hours: 212.44,
    resourceType: "DMND"
  },
  {
    date: "2021-12-20T05:00:00.000Z",
    hours: 604.94103,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-20T05:00:00.000Z",
    hours: 209.76,
    resourceType: "DMND"
  },
  {
    date: "2021-12-21T05:00:00.000Z",
    hours: 618.83085,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-21T05:00:00.000Z",
    hours: 200.78,
    resourceType: "DMND"
  },
  {
    date: "2021-12-22T05:00:00.000Z",
    hours: 580.31758,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-22T05:00:00.000Z",
    hours: 204.78,
    resourceType: "DMND"
  },
  {
    date: "2021-12-23T05:00:00.000Z",
    hours: 231.15,
    resourceType: "DMND"
  },
  {
    date: "2021-12-23T05:00:00.000Z",
    hours: 679.8791100000001,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-24T05:00:00.000Z",
    hours: 654.02485,
    resourceType: "SPLY"
  },
  {
    date: "2021-12-24T05:00:00.000Z",
    hours: 281.28,
    resourceType: "DMND"
  }
];

stackedAreaPlot(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<div id="stackedAreaPlot"></div>

【讨论】：

    猜你喜欢
    • 2014-03-22
    • 1970-01-01
    • 2022-01-04
    • 1970-01-01
    • 1970-01-01
    • 2013-09-15
    • 1970-01-01
    • 1970-01-01
    • 2018-06-17
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode