[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} ];
您可在此處留言