D3 - 未捕获的类型错误:无法调用未定义的方法“文本”

D3 - Uncaught TypeError: Cannot call method 'text' of undefined

本文关键字：未定义 调用 方法 文本 错误 类型 D3      更新时间：2023-09-26

我试图绘制美国历史上过去30年的所有重大事件。这是代码片段 -

var mevent = svg.append("text")
    .attr("class", "year event")
    .attr("text-anchor", "end")
    .attr("y", height - 450)
    .attr("x", width - 300)
    .text("mevent");
var mevents = 
    {"1987":[""],
    "1988":["Pan Am Flight 103", "US President Election"],
    "1989":["Cyclone in NE", "Bay Area Earth Quake"],
    "1990":["Tornado in MW", "Gulf War 1"],
    "1991":["Rodney King LA"],
    "1992":["Cyclone in SE", "US President Election"],
    "1993":["Great Flood of 1993 in MidWest", "Blizzard in NorthEast"],
    "1994":["Earthquake in LA"],
    "1995":["Flood in SouthEast", "Heat Wave in MidWest", "OJ Simpson Trial"],
    "1996":["Summer Olympics in Atlanta", "US President Election"],
    "1997":["Flood in MidWest", "Death of Princess Diana"],
    "1998":["Blizzard Ice Storm in NorthEast"],
    "1999":["Landslide in WA", "66 Tornadoes across MidWest and South", "Heat Wave in MidWest and NorthEast"],
    "2000":["Dot com bubble burst", "US President Election and Florida Recount"],
    "2001":["Cyclone in South", "9/11"],
    "2002":["US Invasion of Afganistan", "Winter Olympics in Salt Lake City, Utha", "US Airways Bankruptcy", "United Airlines Bankruptcy"],
    "2003":["Gulf War 2", "United Airlines Bankruptcy"],
    "2004":["Cyclones across TX, FL and East Coast",  "US President Election", "Asia Tsunami"],
    "2005":["7 Tornadoes across MidWest, South and SouthEast", "Death of Pope John Paul 2", "Hurrican Katrina"],
    "2006":["United Airlines comes out of Bankruptcy"],
    "2007":["Wildfires in CA"],
    "2008":["Tornados across South", "Lehman Brothers", "US President Election", "Mumbai Terror Attacks"]};

console.log(mevents[year]);     
event.text(typeof mevents[year] + " " + mevents[year]);

我可以在控制台中打印值。但是我不能将它们分配给文本变量。我错过了什么？

假设svg只包含一个节点，你实际上只附加了一个text元素（字符串值为"mevent"）。

听起来你想要的是做一个数据联接，这将为数据数组中的每个元素生成一个text节点。 

var mevent = svg.selectAll("text")
    .data(mevents)
    .enter().append("text")
        .attr("class", "year event")
        .attr("text-anchor", "end")
        .attr("y", height - 450)
        .attr("x", width - 300)
        .text("mevent");

您可以通过阅读使用联接进行思考教程来了解有关此内容的更多信息。 这是使用 d3 的一个非常基本的部分，因此值得花一些时间来真正了解它是如何工作的。

相关文章：