shapes: text

by ben straate

HTML

<svg height="400px" width="400px"></svg>

CSS

svg {
  background: aliceblue;
}

text {
    font-family:sans-serif;
    font-size:20px;
    fill:purple;  
    text-anchor:top;
}

path {
  fill: none;
  stroke: tomato;
  stroke-width: 3px;
}

line {
    stroke-width:3px;
    stroke:gray;
}

JavaScript

var svg=d3.select('svg')

svg.append('line')
.attr('x1',50)
.attr('y1',100)
.attr('x2',350)
.attr('y2',200)

var data = [{x:10,y:125},{x:50,y:250},{x:150,y:175}]

var line = d3.svg.line()
.x(function(d){return d.x;})
.y(function(d){return d.y;})
.interpolate('step')

svg.append('path')
.attr('d', line(data))

console.log('path interpolation:',line.interpolate())

/*
svg.append('line')
.attr('x1',100)
.attr('y1',10)
.attr('x2',100)
.attr('y2',200)

svg.append('line')
.attr('x1',200)
.attr('y1',10)
.attr('x2',200)
.attr('y2',200)

svg.append('line')
.attr('x1',300)
.attr('y1',10)
.attr('x2',300)
.attr('y2',200)

svg.append('text')
.attr('x',100)
.attr('y',100)
.text('cowboy')

svg.append('text')
.attr('x',200)
.attr('y',100)
.attr('dy','0.5em')
.attr('text-anchor','middle')
.text('astronaut')

svg.append('text')
.attr('x',300)
.attr('y',100)
.attr('dy','1em')
.attr('text-anchor','end')
.text('pioneer')
*/