I am currently facing some issues with the code below and need guidance on how to proceed. I am new to this and unsure of how to call createtooltip. Any assistance would be greatly appreciated.
The error message states that createtooltip is declared but never called.
private initSvg() {
this.createTooltip = d3.select('body').append("div")
.classed('chart-tooltip', true)
.style('display', 'none');
let element = this.chartContainer.nativeElement;
this.svg = d3.select(element)
.append('svg')
.attr("preserveAspectRatio", "xMinYMin meet")
.attr('class', 'chart')
.attr('width', this.w)
.attr('height', this.h)
.attr("viewBox", "0 0 800 600");
this.chart = this.svg.append('g')
.classed('chart-contents', true)
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
this.layersBarArea = this.chart.append('g')
.classed('layers', true);
}
private drawAxis(){
this.xAxis = this.chart.append('g')
.classed('x axis', true)
.attr("transform", "translate(0," + this.height + ")")
.call(d3.axisBottom(this.x).ticks(7))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
this.chart.append("text")
.attr("y", this.height + 40)
.attr("x", (this.width/2))
.classed('axis-title', true)
.style("text-anchor", "end")
.style('stroke', 'none');
this.yAxis = this.chart.append('g')
.classed('y axis', true)
.call(d3.axisLeft(this.y).ticks(7));
this.chart.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - 60)
.attr("x", 0 - (this.height / 2))
.style("text-anchor", "middle")
.style('stroke', 'none')
.classed('axis-title', true);
}
private updateChart(stackData:any){
console.log("Update Chart");
this.stackedSeries = this.stack(stackData);
console.log("Look Here", this.stackedSeries);
this.chart.selectAll(".layers").remove();
var new_layer = this.chart.append('g')
.classed('layers', true);
this.x.domain(this.data.cpmans.map((d:any)=>{return d.label;}));
this.y.domain([0, +d3.max(this.stackedSeries, function(d:any){return d3.max(d, (d:any)=>{return d[1];})})]);
this.xAxis.transition().call(d3.axisBottom(this.x));
this.yAxis.transition().call(d3.axisLeft(this.y));
this.layersBar = new_layer.selectAll('.layer')
.data(this.stackedSeries)
.enter()
.append('g')
.classed('layer', true)
.style('fill', (d:any,i:any)=>{return this.colors[i];});
this.x.domain(this.data.cpmans.map((d:any)=>{return d.label;}));
this.y.domain([0, +d3.max(this.stackedSeries, function(d:any){return d3.max(d, (d:any)=>{return d[1];})})]);
this.layersBar.selectAll('rect')
.data((d:any)=>{return d;})
.enter()
.append('rect')
.attr('y', (d:any)=>{return this.y(d[1]);})
.attr('x', (d:any, i:any)=>{return this.x(d.data.label);})
.attr('width', this.x.bandwidth()/2)
.attr('height', (d:any, i:any)=>{ return this.y(d[0]) - this.y(d[1]);})
.on("mouseover", function() { this.tooltip.style("display", null); })
.on("mouseout", function() { this.tooltip.style("display", "none"); })
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
this.tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
this.tooltip.select("text").text(d.y);
});
}
private createTooltip(){
this.tooltip = this.svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
this.tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);
this.tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
}