d3 v4的工具提示未响应条形图

Question

我希望让我的条形改变颜色，并在鼠标指向上方时显示年份和值。我有“ mouseover，mouseout和mousemove”功能，但似乎没有用。任何帮助都会很棒。当我单击该栏时，键和值将显示在控制台中。这些值是嵌套的。谢谢

Js：

//set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 70
},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
padding = 15;

// Fomat timeStamp to year
var dateFormat = d3.timeFormat("%Y");

//append the svg object to the body of the page
var svg = d3.select("#graph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.json("https://moto.data.socrata.com/resource/jfwn-iu5d.json? 
$limit=500000",
function(data) {

    // Objects
    data.forEach(function(data) {
        data.incident_description = data.incident_description;
        data.incident_datetime = dateFormat(new Date(data.incident_datetime));
    });

    // Nest data by year of incident
    var NestbyDate = d3.nest()
        .key(function(d) {
            return d.incident_datetime;
        })
        .key(function(d) {
            return d.incident_description + " " + d.incident_datetime;
        })
        .rollup(function(leaves) {
            return d3.sum(leaves, function(d) {
                return (d.incident_description)
            });
        })
        .entries(data);
    var y_domain = d3.max(NestbyDate, function(d) {
        return d.values.length;
    });

    console.log(NestbyDate) /
        NestbyDate.sort((a, b) => a.key - b.key);
    // set the ranges
    var x = d3.scaleBand().domain(NestbyDate.map(d => 
d.key)).range([padding, width]);
    var y = d3.scaleLinear().domain([0, y_domain]).range([height, 
10]);

    // Add the X Axis
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(6));

    // Add the Y Axis
    svg.append("g")
        .attr("class", "axis")
        .call(d3.axisLeft(y));

    //  Text label for the x-axis
    svg.append("text")
        .attr("x", width / 2)
        .attr("y", height + margin.top + 7)
        .style("text-anchor", "center")
        .text("Day Date Format")
        .text("Year");

    // Text Label for y-axis
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Number of crime incidents");

    // Draw the bars
    svg.selectAll("rect")
        .data(NestbyDate)
        .enter()
        .append("rect")
        .attr("class", "rect")
        .attr("x", function(d) {
            return x(d.key);
        })
        .attr("y", function(d) {
            return y(d.values.length);
        })
        .attr("fill", "darkblue")
        .attr("width", x.bandwidth())
        .attr("height", function(d) {
            return y(0) - y(d.values.length);
        })
        .on("mouseover", function() {
            tooltip.style("display", null);
        })
        .on("mouseout", function() {
            tooltip.style("display", "none");
        })
        .on("mousemove", function(d) {
            console.log(d);
            var xPosition = d3.mouse(this)[0] - 15;
            var yPosition = d3.mouse(this)[1] - 55;
            tooltip.attr("transform", "translate(" + xPosition + 
"," + yPosition + ")");
            tooltip.select("text").text(d.key +":" + y_domain);
        });

    // tooltips
    var tooltip = svg.append("g")
        .attr("class", "tooltip")
        .style("display", "none");
    tooltip.append("text")
        .attr("dy", "1.2mm")
});

html的图形部分：

<div>
            <h3> Number of crimes per year</h3>
            <p>Below is a bar graph of the total number of crimes per year 
from 2011 to 2018. The most crime incidents occur in 2017, with a total of 
101,478 crimes.</p>
            <div id="graph" class="responsive-plot"></div>
        </div>
    </div>