0

私は、米国の歴史における過去 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]);

コンソールに値を出力できます。しかし、それらをテキスト変数に割り当てることはできません。私は何が欠けていますか？

4

1 に答える 1

0

svgノードが 1 つだけ含まれていると仮定すると、実際には 1 つの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");

これについては、 Thinking With Joinsチュートリアルを読むことでさらに学ぶことができます。これは d3 を使用する上で非常に基本的な部分であるため、d3 がどのように機能するかを理解するために時間を費やす価値があります。

于 2013-09-19T05:26:40.140 に答える