File:D3 Example Data-binding.svg
此SVG文件的PNG预览的大小：120 × 120像素。 其他分辨率：240 × 240像素 | 480 × 480像素 | 768 × 768像素 | 1,024 × 1,024像素 | 2,048 × 2,048像素。
原始文件 （SVG文件，尺寸为120 × 120像素，文件大小：778字节）
摘要
| 描述 |
中文（臺灣）：用於w:zh:D3.js條目測試樣例的結果圖 |
| 日期 | |
| 来源 | 自己的作品 |
| 作者 | A2569875 |
- 產生此圖的程式碼
// Data
var countriesData = [
{ name:"Ireland", income:53000, life: 78, pop:6378, color: "black"},
{ name:"Norway", income:73000, life: 87, pop:5084, color: "blue" },
{ name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
];
// Create SVG container
var svg = d3.select("#hook").append("svg")
.attr("width", 120)
.attr("height", 120)
.style("background-color", "#D0D0D0");
// Create SVG elements from data
svg.selectAll("circle") // create virtual circle template
.data(countriesData) // bind data
.enter() // for each row in data...
.append("circle") // bind circle & data row such that...
.attr("id", function(d) { return d.name }) // set the circle's id according to the country name
.attr("cx", function(d) { return d.income / 1000 }) // set the circle's horizontal position according to income
.attr("cy", function(d) { return d.life }) // set the circle's vertical position according to life expectancy
.attr("r", function(d) { return d.pop / 1000 *2 }) // set the circle's radius according to country's population
.attr("fill", function(d) { return d.color }); // set the circle's color according to country's color
- 原先輸出的SVG程式碼（無法直接被MediaWiki支援，因此有做修改）
<div id="hook">
<svg width="120" height="120" style="background-color: rgb(208, 208, 208);">
<circle id="Ireland" cx="53" cy="78" r="12.756" fill="black"></circle>
<circle id="Norway" cx="73" cy="87" r="10.168" fill="blue"></circle>
<circle id="Tanzania" cx="27" cy="50" r="6.814" fill="grey"></circle>
</svg>
</div>
许可协议
|
本作品是简易几何学图片，其完全包含公有财产信息，且不包含原始作者，因此著作权不适用于此并归公有领域所有。 |  |
文件历史
点击某个日期/时间查看对应时刻的文件。
| 日期/时间 | 缩略图 | 大小 | 用户 | 备注 | |
|---|---|---|---|---|---|
| 当前 | 2018年9月12日 (三) 19:46 | | 120 × 120（778字节） | A2569875 | User created page with UploadWizard |
文件用途
以下页面使用本文件：
