在 Angular 和 D3.js 中缺少工具提示的 StackedBar 图表 [英] StackedBar Chart with missing ToolTip in Angular and D3.js

问题描述

我已经改编了

带工具提示的堆积条形图
<figure id="stacked-bar-tooltip"></figure>

如果你搜索这个ID，你会看到它是绘图的单点:

import { Component, OnInit } from '@angular/core';import * as d3 from 'd3';@成分({选择器:'app-stacked-bar-tooltip'，templateUrl: './stacked-bar-tooltip.component.html',styleUrls: ['./stacked-bar-tooltip.component.css']})导出类 StackedBarTooltipComponent 实现 OnInit {数据 = [{组":胰岛素"，低":6"，正常":2.75"，高":5.25"}，{组":维生素 B12"，低":1"，正常":3"，高":1"}，{组":Vit D3"，低":1"，正常":3"，高":1"}，{组":锌"，低":1"，正常":3"，高":1"}];svg: 任何;保证金 = 50；宽度 = 750 - (this.margin * 2);高度 = 400 - (this.margin * 2);ngOnInit(): 无效 {this.createSvg();this.drawBars(this.data);}createSvg(): void {this.svg = d3.select("figure#stacked-bar-tooltip").append("svg").attr(宽度", this.width + (this.margin * 2)).attr("height", this.height + (this.margin * 2)).append("g").attr("transform", "translate(" + this.margin + "," + this.margin + ")");}drawBars(数据):无效{//子组列表；即 csv 数据的标题://准备带有要堆叠的键的数组.const dataColumns = Object.keys(data[0]);const subgroups = dataColumns.slice(1)//组列表；即第一个的价值//列 - 组 - 显示在 X 轴上.const 组 = data.map(d => d.group);//创建 X 轴带刻度.const x = d3.scaleBand().domain(组).range([0, this.width]).padding(0.2);//在 DOM 上绘制 X 轴.this.svg.append("g").attr("transform", "translate(0," + this.height + ")").call(d3.axisBottom(x).tickSizeOuter(0));//创建 Y 轴带刻度.const y = d3.scaleLinear().domain([0, 14]).range([this.height, 0]);//在 DOM 上绘制 Y 轴.this.svg.append("g").call(d3.axisLeft(y));//调色板 = 每个子组一种颜色const 颜色 = d3.scaleOrdinal().domain(子组).range(['#ffffcc','#4daf4a', '#e41a1c']);//堆叠每个子组的数据.conststackedData = d3.stack().keys(子组)(数据);//创建工具提示.const tooltip = d3.select("#stacked-bar-tooltip").append(图").style(不透明度", 0).attr(类"，工具提示").style("背景颜色", "白色").style(边框"，实体").style("border-width", "1px").style("border-radius", "5px").style("padding", "10px")//当用户悬停/移动/离开单元格时更改工具提示的鼠标功能.const 鼠标悬停 = 函数(事件，d){/********** 破解！否则，以下行将不起作用:const subgroupName = d3.select(this.parentNode).datum().key;*/const subgroupNameObj: any = d3.select(this.parentNode).datum();const subgroupName = subgroupNameObj.key;/************ 破解结束！************/const subgroupValue = d.data[subgroupName];tooltip.html(子组:"+子组名称+
"+值:"+子组值).style(不透明度", 1)}const mousemove = 函数(事件，d){tooltip.style("transform", "translateY(-55%)").style("left", (event.x)/2+"px").style("top", (event.y)/2-30+"px")}const mouseleave = 函数(事件，d){tooltip.style(不透明度", 0)}//创建并填充堆叠的条形.this.svg.append("g").selectAll("g").data(堆叠数据).join(g").attr("fill", d => color(d.key)).selectAll("rect").data(d => d).join(rect").attr(x", d => x(d.data.group)).attr(y", d => y(d[1])).attr(高度", d => y(d[0]) - y(d[1])).attr(宽度", x.bandwidth()).attr(中风"，灰色").on(鼠标悬停"，鼠标悬停).on(鼠标移动"，鼠标移动).on(mouseleave", mouseleave);}}

我在 SandBox 中创建了项目(这里是

我做错了什么或遗漏了什么，工具提示完全丢失了?

解决方案

原来一直正常运行，不过由于其他应用组件的原因，位置比较远，所以会在页面顶部显示我将无法看到它.

我修改了页面 x 和 y 值如下，使其显示在鼠标指针上方:

const mousemove = function (event, d) {tooltip.style("transform", "translateY(-55%)").style("left", (event.x - 50) + "px").style("top", (event.y + 450) + "px");}

我关于定位的问题仍然存在:无论如何，我如何让这部分显示在鼠标指针上方，通过修改现有代码?

I have adapted this example to work with the latest Angular and D3.

It works fine (after a little hack) but I do not get the tooltips when hovering, etc...

<h3>Stacked Bar Chart with Tooltips</h3>

<figure id="stacked-bar-tooltip"></figure>

If you search for this ID, you will see that it is the single point of drawing:

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-stacked-bar-tooltip',
  templateUrl: './stacked-bar-tooltip.component.html',
  styleUrls: ['./stacked-bar-tooltip.component.css']
})
export class StackedBarTooltipComponent implements OnInit {

  data = [
    {"group": "Insulin", "Low": "6", "Normal": "2.75", "High": "5.25"},
    {"group": "Vit B12", "Low": "1", "Normal": "3", "High": "1"},
    {"group": "Vit D3", "Low": "1", "Normal": "3", "High": "1"},
    {"group": "Zinc", "Low": "1", "Normal": "3", "High": "1"}
  ];

  svg: any;

  margin = 50;
  width = 750 - (this.margin * 2);
  height = 400 - (this.margin * 2);

  ngOnInit(): void {
    this.createSvg();
    this.drawBars(this.data);
  }

  createSvg(): void {
    this.svg = d3.select("figure#stacked-bar-tooltip")
    .append("svg")
    .attr("width", this.width + (this.margin * 2))
    .attr("height", this.height + (this.margin * 2))
    .append("g")
    .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
  }

  drawBars(data): void {
    
    // List of subgroups; i.e. the header of the csv data:
    // Prepare the array with the keys for stacking.
    const dataColumns = Object.keys(data[0]);
    const subgroups = dataColumns.slice(1)

    // List of groups; i.e. value of the first
    // column - group - shown on the X axis.
    const groups = data.map(d => d.group);

    // Create the X-axis band scale.
    const x = d3.scaleBand()
    .domain(groups)
    .range([0, this.width])
    .padding(0.2);

    // Draw the X-axis on the DOM.
    this.svg.append("g")
    .attr("transform", "translate(0," + this.height + ")")
    .call(d3.axisBottom(x).tickSizeOuter(0));
    
    // Create the Y-axis band scale.
    const y = d3.scaleLinear()
    .domain([0, 14])
    .range([this.height, 0]);

    // Draw the Y-axis on the DOM.
    this.svg.append("g")
    .call(d3.axisLeft(y));

    // color palette = one color per subgroup
    const color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#ffffcc','#4daf4a', '#e41a1c']);

    // Stack the data per subgroup.
    const stackedData = d3.stack()
    .keys(subgroups)
    (data);

    // Create a tooltip.
    const tooltip = d3.select("#stacked-bar-tooltip")
    .append("figure")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "1px")
    .style("border-radius", "5px")
    .style("padding", "10px")

    // Mouse function that change the tooltip when the user hovers/moves/leaves a cell.
    const mouseover = function(event, d) {
      /********** Hack! Otherwise, the following line would not work:
      const subgroupName = d3.select(this.parentNode).datum().key; */
      const subgroupNameObj: any = d3.select(this.parentNode).datum();
      const subgroupName = subgroupNameObj.key;
      /************ End of Hack! ************/
      const subgroupValue = d.data[subgroupName];
      tooltip.html("subgroup: " + subgroupName + "<br>" + "Value: " + subgroupValue)
            .style("opacity", 1)        
    }
    const mousemove = function(event, d) {
      tooltip.style("transform", "translateY(-55%)")  
            .style("left", (event.x)/2+"px")
            .style("top", (event.y)/2-30+"px")
    }
    const mouseleave = function(event, d) {
      tooltip.style("opacity", 0)
    }

    // Create and fill the stacked bars.
    this.svg.append("g")
    .selectAll("g")
    .data(stackedData)
    .join("g")
    .attr("fill", d => color(d.key))
    .selectAll("rect")    
    .data(d => d)
    .join("rect")
    .attr("x", d => x(d.data.group))
    .attr("y", d => y(d[1]))
    .attr("height", d => y(d[0]) - y(d[1]))
    .attr("width", x.bandwidth())
    .attr("stroke", "grey")
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave);
  }
}

I created the project in SandBox (here is the link) but strangely enough, it works there, but not in my Angular project...

Also, when I inspect the figure, I see that the tooltip is actually working:

What am I doing wrong or missing, that the tooltips are completely missing?

解决方案

It turns out it was working all along, though due to other app components, the position was far off, so it would show at the top of the page where I would not be able to see it.

I modified the page x and y values as follows to get it to show above the mouse pointer:

const mousemove = function (event, d) {
      tooltip.style("transform", "translateY(-55%)")
        .style("left", (event.x - 50) + "px")
        .style("top", (event.y + 450) + "px");
}

My question about positioning still remains: How do I make this part show just above the mouse pointer regardless, by modifying the existing code?

这篇关于在 Angular 和 D3.js 中缺少工具提示的 StackedBar 图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！