Background information
视频链接
1. 本项目的github链接在这里
2. 讲师的创建的开源项目model.js:A functional reactive model library for interactive data visualization.
3. open source project chiasm: based on model.js; configuration driven
4. D3 stands for Data-Driven Documents
5. D3 came out from an older project called Protovis
Code examples covering basic HTML, SVG, and CSS
- 理解html、SVG、CSS是理解D3的基础。
- Let’s Make a Bar Chart
- D3 is based on html5, there are SVG, CSS and JS.
- jsbin可在浏览器内实施编写web内容。使用
Add library-D3
即可添加D3 - SVG(Scalable Vector Graphics): you define the model of the shape, the definition of the shape rather than the pixels.
Example:
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="300">
<rect x="50" y="40" width="300" height="300" fill="red" stroke="black" stroke-width="10"></rect>
</svg>
</body>
</html>
- You must set the width
and the height
of the SVG element itself, otherwise it has a default size that is browser specific.
- (0,0) is the upper-left.
- use fill
to set color, format:
- fill="red"
- fill=rgb(255,0,0)
- fill=rgba(255,0,0,0.5)
- most common: fill="#FF0000"
- fill="none"
- usestroke
to set the outline of the shape
- use ‘stroke-width’ to set the stroke width
- <circle r="100"></circle>
- <circle cs="100" cy="100"></circle>
set the positon of the center of the circle
- <line x1="50" y1="50" x2="200" y2="150"></line>
- 画多条line
会不连续,故需要使用path
- <path d="M50 50 L200 150"></path>
:
- M50 50
–move to(50,50)
- L 200 150
–line to(200,150)
- Domain specific languages for path
- path
可以有fill
属性
- SVG中可以用<g></g>
标签编group,对它们整体操作。
- use text
to display text.<text x="0" y="0">hello SVG</text>
10. bar chart代码:
<!DOCTYPE html>
<html>
<body>
<svg width="250" height="250">
<rect x="0" y="0" width="20" height="200" fill="gray"/>
<rect x="20" y="200" width="200" height="20" fill="gray"/>
<g transform="translate(20,0)">
<rect x="5" y="0" width="40" height="200"/>
<rect x="55" y="55" width="40" height="145"/>
<rect x="105" y="105" width="40" height="95"/>
<rect x="155" y="155" width="40" height="45"/>
</g>
</svg>
</body>
</html>
11. use <style></style>
to set CSS
12. you can assign the class = "a"
attribute to any element, then use .a {}
to select the class
23:38