chapter-8 路径

var canvas = d3.select('body')
    .append('svg')
    .attr('width',500)
    .attr('height',500);

//线条数据
var data = [
    {x:10,y:100},
    {x:60,y:200},
    {x:100,y:400},
];

// 创建线条 - 将数据转化为线条
var line = d3.svg.line()
    .x(function(d){return d.x})
    .y(function(d){return d.y});
    
// 添加路径
canvas.append('g')
    .selectAll('path')
    .attr('transform','translate(100,100)')
    .data([data])
    .enter()
    .append('path')
    .attr('d',line)
    .attr('fill','none')
    .attr('stroke','blue')

线条数据存在d属性中

d3.svg.line() 方法生成线条

Last updated