Javascript 具有角度6的d3鼠标悬停事件

嗨，我一直在尝试在Angular 6.0.3中使用d3.js制作条形图。除了鼠标（click、mouseover、mouseout）事件外，一切似乎都正常工作。下面是错误消息的屏幕截图。

我正在粘贴我在下面使用的全部代码，有人能指出我遗漏了什么吗：

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

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

rendered_data: any;
constructor() { 

this.rendered_data = {
  'data': [{
      'Month': '01',
      'Arts & Crafts': 78,
      'Baby & Toddler Toys': 12,
      'Characters & Brands': 70,
      'Die-Cast & Toy Vehicles': 109,
      'Hobbies': 146
  },
  {
      'Month': '02',
      'Arts & Crafts': 44,
      'Baby & Toddler Toys': 11,
      'Characters & Brands': 64,
      'Die-Cast & Toy Vehicles': 80,
      'Hobbies': 99
  },
  {
      'Month': '03',
      'Arts & Crafts': 77,
      'Baby & Toddler Toys': 3,
      'Characters & Brands': 91,
      'Die-Cast & Toy Vehicles': 118,
      'Hobbies': 117
  },
  {
      'Month': '04',
      'Arts & Crafts': 71,
      'Baby & Toddler Toys': 8,
      'Characters & Brands': 72,
      'Die-Cast & Toy Vehicles': 108,
      'Hobbies': 117
  },
  {
      'Month': '05',
      'Arts & Crafts': 76,
      'Baby & Toddler Toys': 13,
      'Characters & Brands': 85,
      'Die-Cast & Toy Vehicles': 99,
      'Hobbies': 121
  },
  {
      'Month': '06',
      'Arts & Crafts': 57,
      'Baby & Toddler Toys': 11,
      'Characters & Brands': 77,
      'Die-Cast & Toy Vehicles': 102,
      'Hobbies': 131
  },
  {
      'Month': '07',
      'Arts & Crafts': 66,
      'Baby & Toddler Toys': 6,
      'Characters & Brands': 100,
      'Die-Cast & Toy Vehicles': 116,
      'Hobbies': 125
  },
  {
      'Month': '08',
      'Arts & Crafts': 59,
      'Baby & Toddler Toys': 6,
      'Characters & Brands': 86,
      'Die-Cast & Toy Vehicles': 99,
      'Hobbies': 99
  },
  {
      'Month': '09',
      'Arts & Crafts': 72,
      'Baby & Toddler Toys': 7,
      'Characters & Brands': 74,
      'Die-Cast & Toy Vehicles': 98,
      'Hobbies': 129
  },
  {
      'Month': '10',
      'Arts & Crafts': 62,
      'Baby & Toddler Toys': 10,
      'Characters & Brands': 84,
      'Die-Cast & Toy Vehicles': 105,
      'Hobbies': 123
  },
  {
      'Month': '11',
      'Arts & Crafts': 78,
      'Baby & Toddler Toys': 11,
      'Characters & Brands': 66,
      'Die-Cast & Toy Vehicles': 99,
      'Hobbies': 129
  },
  {
      'Month': '12',
      'Arts & Crafts': 62,
      'Baby & Toddler Toys': 8,
      'Characters & Brands': 91,
      'Die-Cast & Toy Vehicles': 88,
      'Hobbies': 128
  }]};

 ngOnInit() {
     this.generateHistoricBarChart();
 }
 generateHistoricBarChart() {
    let prev = '';
    let margin = {top: 5, right: 20, bottom: 30, left: 40};
    let width = 600 - margin.left - margin.right;
    let height = 420 - margin.top - margin.bottom;
    let svg = d3.select('#chart').classed("svg-container", true).append('svg')
     .attr("preserveAspectRatio", "xMinYMin meet")
     .attr("viewBox", "0 0 600 420")
     .classed("svg-content-responsive", true)
     .style('background', '#eee');

let chart = svg.append('g')
  .attr('class', 'bar')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

let tooltip = d3.select('body').append('div').attr('class', 'toolTip');
let xDomain = this.rendered_data.data.map(d => d.Month);
let yDomain: any = [0, d3.max(this.rendered_data.data, d => d['Arts & Crafts']*1.1)];

let x = d3.scaleBand()
        .domain(xDomain)
        .rangeRound([0, width])
        .padding(0.2);

const y = d3.scaleLinear()
        .domain(yDomain)
        .range([height, 0]);

// add the x Axis
svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate(${margin.left}, ${margin.top + height})`)
        .call(d3.axisBottom(x));

// add the y Axis
svg.append('g')
        .attr('class', 'y axis')
        .attr('transform', `translate(${margin.left}, ${margin.top})`)
        .call(d3.axisLeft(y));

// plot chart with data
svg.selectAll('bar')
    .data(this.rendered_data.data)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function(d) { 
        return margin.left + x(d['Month']); 
    })
    .attr('y', function (d, i) { 
        return height; 
    })
    .attr('width', x.bandwidth)
    .attr('fill', '#5799C7')
    .attr('height', 0)
    .transition().duration(200).delay(function (d, i) { 
        return i * 50; 
    })
    .attr('height', function(d) { 
        return height - y(d['Arts & Crafts']); 
    })
    .attr('y', function(d) { 
        return y(d['Arts & Crafts']); 
    })
    .on('mouseover', 
     function(d){
         tooltip
             .style('left', d3.event.pageX - 50 + 'px')
             .style('top', d3.event.pageY - 70 + 'px')
             .style('background', '#333') 
             .style('display', 'inline-block')  
             .html(`${d['Month']} <br /> ${d['Arts & Crafts']}`)
     }
    );
 }
 }

从'@angular/core'导入{Component，Input，OnInit}；
从“d3”导入*作为d3；
@组成部分({
选择器：“应用程序原子”，
templateUrl:'./atom.component.html'，
样式URL:['./atom.component.css']
}
)
导出类AtomComponent实现OnInit{
渲染数据：任何；
构造函数（）{
此.u数据={
“数据”：[{
“月”：“01”，
“工艺美术”：78，
“婴幼儿玩具”：12、，
《人物与品牌》：70，
“压铸和玩具车”：109，
‘爱好’：146
},
{
“月”：“02”，
“工艺美术”：44，
“婴幼儿玩具”：11，
《人物与品牌》：64，
“压铸和玩具车”：80，
‘爱好’：99
},
{
“月”：“03”，
“工艺美术”：77，
“婴幼儿玩具”：3，
《人物与品牌》：91，
“压铸和玩具车”：118，
‘爱好’：117
},
{
“月”：“04”，
“工艺美术”：71，
“婴幼儿玩具”：8、，
《人物与品牌》：72，
“压铸和玩具车”：108，
‘爱好’：117
},
{
“月”：“05”，
“工艺美术”：76，
“婴幼儿玩具”：13，
《人物与品牌》：85，
“压铸和玩具车”：99，
‘爱好’：121
},
{
“月”：“06”，
“工艺美术”：57，
“婴幼儿玩具”：11，
《人物与品牌》：77，
“压铸和玩具车”：102，
‘爱好’：131
},
{
“月”：“07”，
“工艺美术”：66，
“婴幼儿玩具”：6、，
《人物与品牌》：100，
“压铸和玩具车”：116，
“爱好”：125
},
{
“月”：“08”，
“工艺美术”：59，
“婴幼儿玩具”：6、，
《人物与品牌》：86，
“压铸和玩具车”：99，
‘爱好’：99
},
{
“月”：“09”，
“工艺美术”：72，
“婴幼儿玩具”：7、，
《人物与品牌》：74，
“压铸和玩具车”：98，
“爱好”：129
},
{
“月”：“10”，
“工艺美术”：62，
“婴幼儿玩具”：10、，
《人物与品牌》：84，
“压铸和玩具车”：105，
爱好：123
},
{
“月”：“11”，
“工艺美术”：78，
“婴幼儿玩具”：11，
《人物与品牌》：66，
“压铸和玩具车”：99，
“爱好”：129
},
{
“月”：“12”，
“工艺美术”：62，
“婴幼儿玩具”：8、，
《人物与品牌》：91，
“压铸和玩具车”：88，
“爱好”：128
}]};
恩戈尼尼特（）{
此.generateHistoricBarChart（）；
}
生成历史条形图（）{
让prev=''；
让边距={顶部：5，右侧：20，底部：30，左侧：40}；
让宽度=600-边距.左-边距.右；
让高度=420-margin.top-margin.bottom；
让svg=d3.select（'#chart'）.classed（“svg容器”，true）。append（'svg'））
.attr（“保存Aspectratio”、“xMinYMin满足”）
.attr（“视图框”、“0 600 420”）
.classed（“svg内容响应”，真）
.style（'background'，'#eee'）；
让chart=svg.append（'g'）
.attr（'class'，'bar'）
.attr（'transform'，'translate（${margin.left}，${margin.top}）`）；
让tooltip=d3.select（'body'）.append（'div'）.attr（'class'，'tooltip'）；
设xDomain=this.rendered_data.data.map（d=>d.Month）；
让yDomain:any=[0，d3.max（this.rendered_data.data，d=>d['Arts&Crafts']*1.1）]；
设x=d3.scaleBand（）
.domain（xDomain）
.rangeRound（[0，宽度]）
.填充（0.2）；
常数y=d3.scaleLinear（）
.domain（yDomain）
.范围（[高度，0]）；
//添加x轴
append（'g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（${margin.left}，${margin.top+height}）`）
.call（d3.axisBottom（x））；
//添加y轴
append（'g'）
.attr（'class'，'y轴'）
.attr（'transform'，'translate（${margin.left}，${margin.top}）`）
.调用（d3.左（y））；
//带数据的绘图图
svg.selectAll（'bar'））
.data（此.rendered_data.data）
.enter（）.append（'rect'）
.attr（'class'，'bar'）
.attr（'x'，函数（d）{
收益率.左+x（d['月]）；
})
.attr（'y'，函数（d，i）{
返回高度；
})
.attr（'宽度'，x.带宽）
.attr（'fill'，'#5799C7'）
.attr（'height'，0）
.transition（）.duration（200）.delay（函数（d，i）{
返回i*50；
})
.attr（'height'，函数（d）{
返回高度-y（d[‘工艺品’）；
})
.attr（'y'，函数（d）{
报税表y(d"工艺品");；
})
.on（'mouseover'，
职能（d）{
工具提示
.style（'left'，d3.event.pageX-50+'px'）
.style（'top'，d3.event.pageY-70+'px'）
.style（'背景'，'#333'）
.style（'显示'，'内联块'）
.html（`${d['Month']}
${d['Arts&Crafts']}`）
}
);
}
}

---

任何帮助都是值得的。如果我没有提供清楚的解释，请告诉我。

这应该可以触发鼠标悬停事件。 并将您的css添加到帖子中

d3.select('svg') .on('mouseover', function(d){
       console.log(d)
       console.log(d3.mouse(this))
         tooltip
             .style('left', d3.mouse(this)[0] - 50 + 'px')
             .style('top', d3.mouse(this)[1] - 70 + 'px')
             .style('background', '#333') 
             .style('display', 'inline-block')  
             .html(`${d['Month']} <br /> ${d['Arts & Crafts']}`)
     }

d3.选择（'svg'）。打开（'mouseover'，函数（d）{
控制台日志（d）
console.log（d3.mouse（this））
工具提示
.style（'left'，d3.鼠标（此）[0]-50+'px'）
.style（'top'，d3.鼠标（此）[1]-70+'px'）
.style（'背景'，'#333'）
.style（'显示'，'内联块'）
.html（`${d['Month']}
${d['Arts&Crafts']}`）
}

d在这里通常是数据元素