Introduction to D3

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>

Alt text
- You must set the width and the heightof 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会不连续 Alt text ，故需要使用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>

Alt text
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

Background information

Code examples covering basic HTML, SVG, and CSS

猜你喜欢