59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
var width = 500;
|
|
var height = 500;
|
|
|
|
var svg = d3.select('body')
|
|
.append('svg')
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
|
|
//1. rect
|
|
// <svg width="300" height="300">
|
|
// <rect width="100" height="200" x="100" y="100"></rect>
|
|
// </svg>
|
|
|
|
// svg.append("rect")
|
|
// .attr("x", 100)
|
|
// .attr("y", 100)
|
|
// .attr("width", 100)
|
|
// .attr("height", 200)
|
|
|
|
//2. line
|
|
// <svg width="500" height="500">
|
|
// <line x1="0" y1="300" x2="400" y2="100" stroke="#ffffff"></line>
|
|
// </svg>
|
|
// svg.append('line')
|
|
// .attr('x1', 0)
|
|
// .attr('x2', 400)
|
|
// .attr('y1', 300)
|
|
// .attr('y2', 100)
|
|
// .attr('stroke', '#000000')
|
|
|
|
//3. circle - try on your own!
|
|
|
|
//4. ellipse - try on your own!
|
|
|
|
//5. text - try on your own!
|
|
|
|
//6. Circle over text
|
|
// <svg width="500" height="500">
|
|
// <g>
|
|
// <circle r="100" cx="250" cy="250"></circle>
|
|
// <text x="200" y="200" stroke="#fff">Text Goes Here</text>
|
|
// </g>
|
|
// </svg>
|
|
var group = svg.append('g')
|
|
|
|
var circle = group.append('circle')
|
|
.attr('cx', 250)
|
|
.attr('cy', 250)
|
|
.attr('r', 100)
|
|
.attr('fill', 'hotpink')
|
|
.style('opacity', 0.8)
|
|
group.append("text")
|
|
.attr("x", 175)
|
|
.attr("y", 200)
|
|
.attr("stroke", "#fff")
|
|
.attr("font-family", "Impact, sans-serif")
|
|
.attr("font-size", '24px')
|
|
.attr("fill", "red")
|
|
.text("This is a circle!") |