D3.js 文本元素显示 'undefined' 而不是值

Question

我目前正在尝试在我的折线图中显示值，尽管 'undefined' 显示的不是值。下面是数据的声明方式

var countries = color.domain().map(function(name) {             // Nest the data into an array of objects with new keys
        return {
            name: name,                                             // "name": the csv headers except date and events
            values: data.map(function(d) {                          // "values": which has an array of the dates and temperatures
                let event;
                if(name == "Malta"){
                    event = d.MaltaEvents
                }
                if(name == "Italy"){
                    event = d.ItalyEvents
                }
                if(name == "France"){
                    event = d.FranceEvents
                }
                if(name == "Germany"){
                    event = d.GermanyEvents
                }
                if(name == "Sweden"){
                    event = d.SwedenEvents
                }
                return {
                    date: d.date, 
                    temperature: +(d[name]),
                    event
                };
            }),
            visible: true                                           // "visible": all true
        };
    });

这就是我遇到的问题，符合 //ISSUE HERE

.on('mousemove', function() {                       // mouse moving over canvas
            var mouse = d3.mouse(this);
            d3.select(".mouse-line")
            .attr("d", function() {
                var d = "M" + mouse[0] + "," + height;
                d += " " + mouse[0] + "," + 0;
                return d;
            });

            d3.selectAll(".mouse-per-line")
                .attr("transform", function(d, i) {                    
                    var beginning = 0,
                        end = lines[i].getTotalLength(),
                        target = null;

                    if(d.visible){
                        while (true){
                            target = Math.floor((beginning + end) / 2);
                            pos = lines[i].getPointAtLength(target);
                            if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                                break;
                            }
                            if (pos.x > mouse[0])      
                                end = target;
                            else if (pos.x < mouse[0]) 
                                beginning = target;
                            else 
                                break;                                //position found
                    }
                }

                d3.select(this)
                    .select('text').text(d => `Date: ${d.date} | Temperature: ${y.invert(pos.y).toFixed(2)} | Event: ${d.event}`); // ISSUE HERE
                                           
                return "translate(" + mouse[0] + "," + pos.y +")";
        });
    });

当前显示的图像：

请问为什么会这样？

Answer 1

如果此代码应该更新一行的路径：

.on('mousemove', function() {                       // mouse moving over canvas
  var mouse = d3.mouse(this);
  d3.select(".mouse-line")
    .attr("d", function() {
      var d = "M" + mouse[0] + "," + height;
      d += " " + mouse[0] + "," + 0;
      return d;
  });
}

然后 (L) 指令的一行丢失了。正确的代码是(D3 V6):

.on('mousemove', e => {                       
  d3.select(".mouse-line")
    .attr("d", `M ${e.layerX},${height} L ${e.layerX},0`);
}

对于 D3 V5 或更早版本，使用：

.on('mousemove', () => {                       
  d3.select(".mouse-line")
    .attr("d", `M ${d3.event.layerX},${height} L ${d3.event.layerX},0`);
}

D3.js 文本元素显示 'undefined' 而不是值

D3.js text element displaying 'undefined' rather than value

javascript

formatting

text

d3.js

display