Question

以下代码与热图有关。我向svg添加了一个工具提示，但是，不会为图形上的所有元素触发mouseover事件。最后一行（代表十二月）不显示工具提示。

我重新调整了SVG的大小，然后在没有运气的情况下进行了填充和边距处理。
我也尝试过没有运气的工具提示

有人可以指出我正确的方向吗？

对于实时应用，请点击Here

$(document).ready(function() {
$.getJSON(
    'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json',


    function(data) {

            const width = 900
            const height = 600
          let dataset = []
            const baseTemp = data.baseTemperature

            data.monthlyVariance.forEach((entry) => {
                dataset.push([ entry.year, entry.month - 1, entry.variance ])
            })

            const maxYear = (d3.max(dataset, d => d[0]) + 2)
            const minYear = d3.min(dataset, d => d[0])
            const colorDomain = [ 1,2,3,4,5,6,7,8,9,10,11,12,13 ]
            const colorRange = [
                '#3d86d3',
                '#47a9c1',
                '#58d3c5',
                '#3fc18b',
                '#3fc162',
                '#86ba50',
                '#7fc141',
                '#98c43a',
                '#a9c140',
                '#c4b121',
                '#d1801d',
                '#d1491b',
                '#d1361b'
         ]

            let xScale = d3
                .scaleLinear()
                .domain([ minYear, maxYear ])
                .range([ 0, width ])

            let yScale = d3
                .scaleLinear()
                .domain([ 11 , 0 ])
                .range([ height  , 0 ])

            let colorScale = d3.scaleQuantile()
                .domain(colorDomain)
                .range(colorRange)

        let monthFormatter = d3.timeFormat('%B')
            let  tickFormatter = (month) => {
                return monthFormatter(new Date(minYear, month))
            }
            const xAxis = d3.axisBottom(xScale).tickFormat(d3.format('d'))
            const yAxis = d3.axisLeft(yScale).tickFormat(tickFormatter).tickSize([ 0 ])

            var tooltip = d3
                .select('.chart')
                .append('div')
                .attr('id', 'tooltip')

            let svg = d3.select('.chart')
                .append('svg')
                .attr('width', width)
                .attr('height', height)
                .style('padding', '40 20 140 150')

            svg
                .selectAll('rect')
        .data(dataset)
        .enter()
        .append('rect')
        .attr('x', d => xScale(d[0]))
        .attr('y', d => yScale(d[1]))
                .attr('width', 4)
                .attr('height', (height/10))
                .attr('class', 'cell')
                .attr('fill', d => {
                     return colorScale(Math.floor(baseTemp + d[2]))
                })
              .attr('data-year', d => d[0])
                .attr('data-month', d => d[1])
                .attr('data-temp', d => (d[2] + baseTemp))
                .on('mouseover', (d) => {
                    tooltip
                        .transition()
                        .style('opacity', 1)
                        .style('visibility', 'visible')
                    tooltip
                        .attr('data-year', d[0])
                        .html(d[0] + ', ' + monthFormatter(new Date(d[0],d[1]))+'</br>')
                        .style('left', (d3.event.pageX + 10) + 'px')
                        .style('top', (d3.event.pageY + 10) + 'px')
                })

            svg.on('mouseout', () => {
                tooltip.transition().style('visibility', 'hidden')
            })

        }
     )
  })

Answer 1

您的SVG区域不够大，无法容纳这些RECT的最后一行，而rect的最后一行超出了事件区域。只需设置SVG的高度即可容纳最后一行。

您将范围设置为0-height，并将其用作rect的y attr，这意味着最后一行将超过SVG的区域，当您将鼠标悬停在最后一行区域上时，实际上它仅是将鼠标悬停在svg元素上，因此事件从SVG冒泡到div外部，内部没有这些rect元素的事件，因此没有触发mouseover事件处理程序

Answer 2

您必须调整${server_names[@]}的域。

您使用数字0..11进行呼叫，但您希望有空间显示第11个月，以便该域跨度为12。

yScale

要计算矩形的高度，请使用let yScale = d3 .scaleLinear() .domain([ 12, 0 ]) .range([height , 0]);

yScale

您可以使用类似的技巧根据X的域来计算rect的宽度。

底部元素未触发D3鼠标悬停事件

2 个答案: