D3.js is a JavaScript library for manipulating documents based on data. It allows binding data to the DOM and applying data-driven transformations. The document discusses using D3.js to create force-directed graphs by binding data to SVG elements like paths, circles, and text. Key aspects covered include the D3 force layout to simulate physical forces on nodes, and SVG attributes to define paths, circles, text position and styling.

1. d3js learning tips
HowardLiu

2. Before
presentation
 Citation tree
 How to learn d3js quickly https://d3js.org/
 Summary: 借用他們的idea來修改自己想要的效果

3. D3.js
(data-driven
documents)
 https://d3js.org/
 D3 allows you to bind arbitrary data to a Document Object Model
(DOM), and then apply data-driven transformations to the
document.

4. Example
(Preparation)
 http://bl.ocks.org/mbostock/1153292
 Elements:
 links(n1, n2, type), nodes(name), texts(name), markers
 Data:
 links
 Append a <svg> (ScalableVector Graphics) element
 Append 3 <g> (group) elements, for <path>, <circle>, <text>
 https://developer.mozilla.org/en-US/docs/Web/SVG/Element

5. d3.layout
.force()
 https://github.com/mbostock/d3/wiki/Force-Layout
 A flexible force-directed graph layout implementation using
positionVerlet integration to allow simple constraints.
 .nodes, .links, .size, .start(), .stop(), .resume(),
 .linkStrength, .linkDistance
 http://bl.ocks.org/sathomas/774d02a21dc1c714def8
 .friction
 http://bl.ocks.org/sathomas/9041d7cb311a729e62f3
 .charge, .chargeDistance
 http://jsdatav.is/visuals.html?id=49b1d119e05b5efbf96e
 .gravity
 .tick(), .on(), .drag()
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([w, h])
.linkStrength(0.1)
.friction(0.9)
.linkDistance(20)
.charge(-30)
.gravity(0.1)
.theta(0.8)
.alpha(0.1)
.start();

6. Example
(path)
 Set up attributes
 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path
 Attribute d
 This attribute defines a path to follow.
 Attribute fill
 This attribute is a presentation attribute that define the color of the
interior of the given graphical element.(*)
 Attribute stroke
 This attribute defines the color of the outline on a given graphical
element.The default value for the stroke attribute is none.
 Attribute stroke-width
 This attribute specifies the width of the outline on the current object.
Its default value is 1.
<svg width="100%" height="100%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3" />
</svg>

7. Example
(circle)
 Set up attributes
 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
 Attribute cx
 this attribute define the x-axis coordinate of the center of the
element.
 Attribute cy
 this attribute define the y-axis coordinate of the center of the
element.
 Attribute r
 this attribute defines the radius of the element. A value of zero
disables rendering of the circle.
 Attribute fill
 Attribute stroke
 Attribute stroke-width
<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50"/>
</svg>

8. Example
(text)
 Set up attributes
 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="30px" viewBox="0 0 1000 300">
<text x="250" y="150" font-family="Verdana" font-size="55"> Hello, out there </text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" />
</svg>