[D3] SVG Text Elements

範例1：

<svg>
  <text ...>...</text>
</svg>

範例2：

<svg>
  <text x="50" y="50" font-family="sans-serif" font-size="12px"></text>
</svg>

範例3：

<svg>
  <circle cx="20" cy="20" r="20" fill="purple" />
  <text x="50" y="50" font-family="sans-serif" font-size="12px" fill="red">Circle</text>
</svg>

範例4： Adding SVG Text Elements

d3.selection.append("circle").attr("cx", 20).attr("cy", 20).attr("r", 20).style("fill", "purple");

var svgContainer = d3.select("body").append("svg").attr("width", "200").attr("height", "200");

var svgText = svgContainer.append("text");

svgText.attr("x", 50).attr("y", 50);
svgText.text("circle");
svgText.attr("x", 20).attr("y", 20).text("circle"); // 會取代原來已設定的值

svgText.attr("font-family", "sans-serif").attr("font-size", 12);
svgText.attr("font-size", "30px"); // 這寫法也是可以的

D3, Data and SVG Text

dataSet = [
  {"name": "Shanghai",  "population": 18, "rank": 1},
  {"name": "Guangzhou", "population": 11, "rank": 10}
];