鼠标悬停在 d3 中的事件上，不会以小的倍数调用

Question

我正在尝试为 d3 中的一个小型多图创建工具提示鼠标悬停事件，但从未触发鼠标悬停事件（响应函数只是一个

console.log()

在这个阶段调用）。

我这样生成小倍数

 let svg = d3.select("#vis")
                    .selectAll("uniqueChart")
                    .data(year_dat)
                    .enter()
                    .append('svg')
                    .attr('width', 700)
                    .attr('height', 450)
                    .attr('opacity', 1)

然后将线附加到对象（在添加轴等之后）

svg

as so

svg
    .append("path")
    
    .attr("fill", "none")
    .attr("stroke", linecol)
    .attr("stroke-width", 3)
    .attr('class', 'lines')
    .attr('pointer-events', 'all')
    .attr("d", function(d) { return d3.line()
      .x(function(d) { return timex(d.hour) })
      .y(function(d) { return timey(d.med_est/60) })
      (d.values)
      })
    .on('mouseover', mouseOver)
    .on('mouseout', mouseOut)

但是尽管情节正确形成，但从来没有鼠标悬停事件调用

mouseOver

函数（如前所述，它在这个阶段只是一个

console.log()

。我怀疑这与数据的嵌套和多个有关情节，但没有错误消息。

以下是迄今为止导致这种行为（或缺乏这种行为）的代码的简化版本

let dataset, svg, map

let allGroup
var timey, yAxis
var col, linecol



const margin = {left: 170, top: 30, bottom: 30, right: 20}
const width = 700 - margin.left - margin.right
const height = 400 - margin.top - margin.bottom
const colours = {
 Sydney : "#87ceeb",
 Melbourne : "#000080",
 Brisbane : "#800000",
 Adelaide : "#dc0014",
 Perth : "#fecb29"
}
let rn = "M5_Sydney"
//Read Data, convert numerical categories into floats
//Create the initial visualisation


d3.csv('data/19-22_times.csv', function(d){
    return {
        hour: +d.hour,
        LQ_est: +d.LQ_est,
        med_est: +d.med_est,
        UQ_est: +d.UQ_est,
        LQ_est_char: d.LQ_est_char,
        med_est_char: d.med_est_char,
        UQ_est_char: d.UQ_est_char,
        n_obvs: +d.n_obvs,
        bd_label: d.bd_label,
        route_name: d.route_name,
        year: +d.year,
        city: d.city,
        short_name: d.short_name
        
    };
}).then(data => {
    time_dat = data
    allGroup = [...new Set(time_dat.map(d => d.short_name))]
    //console.log(time_dat)
    r_dat = time_dat.filter(function(d){return d.short_name == rn})
 
    
    d3.select("#selectButton")
      .selectAll('myOptions')
        .data(allGroup)
      .enter()
    .append('option')
    .text(d => d)
    .attr('value', d => d)
    .property('selected', function(d){
        return d == "M5_Sydney"
    });
    createScales()
    setTimeout(drawInitial(), 100)
    
})

 




function createScales(){
  
    

    let min_time, max_time
    min_time = d3.min(r_dat, function(d) { return d.UQ_est; })/60 //remember UQ is upper quartile of speeds
    max_time = d3.max(r_dat, function(d) { return d.LQ_est; })/60
    console.log(min_time)
  
    console.log(max_time)

    timex = d3.scaleLinear(domain = [0, 23], [70, width+150])
    timey = d3.scaleLinear(domain = [0, 1.1*max_time], [height, 0+margin.top])
    console.log(timey)
   
}





// All the initial elements should be create in the drawInitial function
// As they are required, their attributes can be modified
// They can be shown or hidden using their 'opacity' attribute
// Each element should also have an associated class name for easy reference



function drawInitial(){



    let year_dat_ =r_dat.filter(function(d){return d.year == 2019})
    year_dat = d3.nest()
        .key(function(d) {return d.route_name})
        .entries(year_dat_)

    let svg = d3.select("#vis")
                    .selectAll("uniqueChart")
                    .data(year_dat)
                    .enter()
                    .append('svg')
                    .attr('width', 700)
                    .attr('height', 450)
                    .attr('opacity', 1)

                    //.style('background', 'beige')


    let xlabels = ['0:00', '4:00', '8:00', '12:00', '16:00', '20:00'];            
    svg.append('g')
    .call(d3.axisBottom(timex)
        .ticks(6)
        .tickValues([0, 4, 8, 12, 16, 20])
        .tickFormat((d,i) => xlabels[i])
        )
    .attr("transform", "translate(0," + height + ")")
    .style('font-size', '20px')
    .style('font-family', "Crimson Text")
    .select(".domain")
    .attr('opacity', 0)
    .attr('id', 'xaxis')

    yAxis = d3.axisRight(timey).ticks(4)
    
   svg.append('g')
    .attr('id', 'yaxis')
    .attr('class', 'yaxis')
    .style('font-size', '20px')
    .style('font-family', "Crimson Text")
    .call(yAxis)
    .select(".domain")
    .attr('opacity', 0)
    


   let col = colours[r_dat[0]["city"]]
   //console.log(col)
   let linecol = "black"


   console.log(rn)
   svg
      .append("path")
      .attr("fill", col)
      .attr("stroke", col)
      .attr("stroke-width", 1.5)

      .attr('class', 'bands')
      .attr("d", function(d) { return d3.area()
        .x(function(d) { return timex(d.hour) })
        .y0(function(d) { return timey(d.UQ_est/60) })
        .y1(function(d) { return timey(d.LQ_est/60) })
        (d.values)
        })
      .on('mouseover', mouseOver)
      
    svg
    .append("path")
    
    .attr("fill", "none")
    .attr("stroke", linecol)
    .attr("stroke-width", 3)
    .attr('class', 'lines')
    .attr('pointer-events', 'all')
    .attr("d", function(d) { return d3.line()
      .x(function(d) { return timex(d.hour) })
      .y(function(d) { return timey(d.med_est/60) })
      (d.values)
      })
    .on('mouseover', mouseOver)
   
    


    svg
      .append("text")
      .attr("x", width/2)
      .attr("y", margin.top)
      .attr('class', 'title')
        .attr("text-anchor", "middle")  
        .style("font-size", "30px") 
        //.style("text-decoration", "underline")  
        .text(function(d){ return(d.key)})

       
      
    
     
   
    
   
   
}

 function mouseOver(d, i){

      console.log('MOUSE OVER TIGGERED')  
    }