鼠标悬停不适用于D3多折线图线

Question

我正在使用嵌套数据的D3创建多线图，我的原始数据是JSON，其属性包括国家/地区，排名和年份，包括2015年至2018年的数据。我按国家/地区嵌套数据。我能够成功地绘制线条，但是当我想为每条线条添加一个mouseover事件时（例如，我希望所有其他线条的不透明度在悬停在一条线上时都减小），这似乎不起作用。当我为标签或轴添加鼠标悬停事件时，它起作用，但对于线条却不起作用。任何指针将不胜感激。

原始数据：

var data =
[
  {
    "country": "Democratic Republic of the Congo",
    "count": 475694,
    "rank": 1,
    "year": 2015
  },
  {
    "country": "Brazil",
    "count": 419815,
    "rank": 2,
    "year": 2015
  },
  {
    "country": "Angola",
    "count": 343960,
    "rank": 3,
    "year": 2015
  }, ...];

代码

var dataByCountry = d3.nest()
    .key(function(d) {
        return d.country;
    })
    .entries(data);

var margin = {
        top: 20,
        right: 30,
        bottom: 30,
        left: 50
    },
    width = ($(".chart").width() - 10) - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var windowWidth = document.documentElement.clientWidth;

var minWidth = 450,
    maxWidth = document.documentElement.clientWidth > 1200 ? 1000 : 800,
    scrollBarPadding = 10,
    outerWidth = Math.max(minWidth, Math.min(document.documentElement.clientWidth - scrollBarPadding, maxWidth));

var widthScale = d3.scaleLinear()
    .domain([450, 1000])
    .range([60, 150]);

var margin = {
    top: Math.round(widthScale(outerWidth)) * 0.8,
    right: Math.round(widthScale(outerWidth)),
    bottom: Math.round(widthScale(outerWidth)) * 0.8,
    left: Math.round(widthScale(outerWidth))
};
var width = outerWidth - margin.left - margin.right;
var height = 6.5 * width;

var countries2018 = ["Democratic Republic of the Congo", "Australia", "Angola", "Russia", "Sudan", "Brazil", "Zambia", "Central African Republic", "Mozambique", "United States", "India", "China", "United Republic of Tanzania", "Nigeria", "Guinea", "Venezuela", "Canada", "Madagascar", "Mexico", "Argentina", "Ethiopia", "Chad", "Bolivia", "Ghana", "South Africa", "Cameroon", "Burma", "Iraq", "Indonesia", "Colombia", "Kazakhstan", "Paraguay", "Cambodia", "Lao People's Democratic Republic", "Iran (Islamic Republic of)", "Mali", "Zimbabwe", "Cote d'Ivoire", "Congo", "Sierra Leone", "Uganda", "Ukraine", "Thailand", "Senegal", "Peru", "Pakistan", "Viet Nam", "Benin", "Botswana", "Burkina Faso", "Namibia", "Togo", "Honduras", "Malawi", "Turkey", "Papua New Guinea", "Chile", "Algeria", "Guatemala", "Liberia", "Ecuador", "Nicaragua", "Philippines", "Guinea-Bissau", "Serbia", "Libyan Arab Jamahiriya", "Cuba", "Italy", "Romania", "Malaysia", "Germany", "Nepal", "Turkmenistan", "Japan", "Uzbekistan", "Saudi Arabia", "Bangladesh", "Bulgaria", "Gabon", "Spain", "Kenya", "France", "Guyana", "El Salvador", "Dominican Republic", "Egypt", "Portugal", "Oman", "Belarus", "Azerbaijan", "Niger", "Swaziland", "Costa Rica", "Panama", "Sweden", "Korea, Republic of", "Sri Lanka", "Gambia", "Uruguay", "United Kingdom", "Greece", "Belize", "Vanuatu", "Timor-Leste", "Belgium", "Korea, Democratic People's Republic of", "Mongolia", "Poland", "Reunion", "Kuwait", "Suriname", "The former Yugoslav Republic of Macedonia", "Syrian Arab Republic", "Republic of Moldova", "Armenia", "Kyrgyzstan", "Fiji", "New Zealand", "Georgia", "Austria", "Qatar", "Taiwan", "Burundi", "Slovakia", "Netherlands", "Hungary", "Haiti", "Finland", "Morocco", "French Guiana", "Croatia", "New Caledonia", "Bosnia and Herzegovina", "Eritrea", "Czech Republic", "Albania", "Jamaica", "Lesotho", "Somalia", "Equatorial Guinea", "Bhutan", "United Arab Emirates", "Latvia", "Bahamas", "Norway", "Mauritania", "Afghanistan", "Ireland", "Yemen", "Montenegro", "Rwanda", "Israel", "Tunisia", "Luxembourg", "Switzerland", "Denmark", "Lithuania", "Tajikistan", "Trinidad and Tobago", "Estonia", "Puerto Rico", "Jordan", "Comoros", "Lebanon", "Cyprus", "Mauritius", "Samoa", "Barbados", "Palestine", "Djibouti", "Bahrain", "French Polynesia", "Solomon Islands", "Brunei Darussalam", "Cape Verde", "Maldives", "United States Minor Outlying Islands", "Hong Kong", "Slovenia", "Guam", "Saint Kitts and Nevis", "Greenland", "Sao Tome and Principe", "Antigua and Barbuda", "British Virgin Islands", "Northern Mariana Islands", "Turks and Caicos Islands", "Western Sahara", "Guadeloupe", "Martinique", "Singapore", "American Samoa", "Andorra", "Aruba", "French Southern and Antarctic Lands", "Malta", "Tonga", "United States Virgin Islands", "Grenada", "Iceland"];


var color = d3.scaleOrdinal()
    .range(["#B5C660", "#B3C762", "#B0C765", "#ADC767", "#AAC769", "#A7C76A", "#A3C66B", "#9FC46B", "#9AC26A",
        "#94BF68", "#8EBB66", "#87B662", "#7FB05E", "#75AA5A", "#6BA354", "#609B4F", "#549249", "#478943", "#39803D",
        "#2C7739", "#206F36", "#166A35", "#0F6638", "#0B663E", "#0C6A48", "#127257", "#1B7D6A", "#27897F", "#359795",
        "#42A4AB", "#4EB0C0", "#58BAD3", "#5DBFE2", "#5DC0EC", "#5ABCF2", "#52B5F4", "#49ABF3", "#3E9FEE", "#3292E7",
        "#2785DE", "#1E77D3", "#176AC7", "#125EBA", "#0F53AB", "#0E489C", "#0D3E8D", "#0E347D", "#0F2B6C", "#11215C"
    ])
    .domain(countries2018);


var startYear = 2015, //2010
    endYear = 2018, //2019
    yearRange = endYear - startYear;

var x = d3.scaleLinear().domain([startYear, endYear]).range([0, width]),
    y = d3.scaleLinear().domain([1, 200]).range([0, height]),
    y2 = d3.scaleBand().domain(countries2018).range([0, height + 10])


var xAxis = d3.axisBottom(x).ticks(4).tickFormat(d3.format("d")).tickSize(0),
    yAxis = d3.axisLeft(y).ticks(200).tickSize(0),
    yAxis2 = d3.axisRight(y2).ticks(200).tickSize(0);

var line = d3.line()
    .x(function(d) {
        return x(d.year);
    })
    .y(function(d) {
        return y(d.rank);
    })


var chart = d3.select(".chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("class", "chartWrapper")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");




//Append x axis to chart
chart.append("g")
    .attr("class", "x axis")
    .style("font-size", 13)
    .attr("transform", "translate(0," + (height + 9) + ")")
    .call(xAxis);

//Append y axis to chart
chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(-10,0)")
    .call(yAxis)
    .append("text")
    .attr("class", "titles")
    .attr("transform", "rotate(-90)")
    .attr("x", -(height / 2))
    .attr("y", -35)
    .attr("dy", ".71em")
    .style("font-size", 14)
    .style("text-anchor", "middle")
    .text("Position in Top 10");

chart.append("g")
    .attr("class", "y axis2")
    .attr("transform", "translate(" + (width - 2) + ",-10)")
    .call(yAxis2);

d3.select(".axis2 path").attr("stroke", "none");


var chartG = chart.append("g")
    .attr("class", "chart");

var chartWrapper = chartG.selectAll(".line")
    .data(dataByCountry, function(d) {
        return d.key;
    });


chartWrapper.enter().append("path")
    .attr("class", "line")
    .style("pointer-events", "none")
    .style("stroke-linejoin", "round")
    .attr("d", function(d) {
        return line(d.values);
    })
    .on("mouseover", function(d) {
        console.log(d)
    }) //doesn't work
    .style("stroke-width", 4)
    .style("stroke", function(d) {
        return color(d.key);
    })
    .attr("fill", "none");


d3.selectAll(".axis2 text").on("mouseover", function(d) {
    console.log(d)
}) //works

d3.selectAll(".chart path").on("mouseover", function(d) {
    console.log(d)
}) //doesn't work

这是我的小提琴的链接（我将json数据直接添加到JS中，因此相关代码从4805行开始）：https://jsfiddle.net/jhjanicki/rjyxu463/12/