D3.js常用图形

var ele = d3.select('body')//select()返回一个对DOM中匹配的第一个元素的引用
    .append('p')//append()创建一个新DOM元素，然后将其追加到条用的元素末尾
    .text('new paragraph');//text()接收字符串，将其插入当前元素的开始和结束标签之间

var dataset = [3, 2, 1];
var eles = d3.select('body')
    .selectAll('p') //选中DOM中所有段落，若无则返回空
    .data(dataset)//解析并输出数据值
    .enter()//创建新的绑定数据的元素（占位元素）
    .append('p')
    .text('paragraph');

//CSV数据
id,name,title
1,alice,girl
2,ben,boy
3,carl,boy

//加载CSV数据
var dataset;
d3.csv('./assets/data/demo.csv', function (error, data) {
    if (error) {
        console.log(error);
    } else {
        dataset = data;//将csv数据交给全局变量
        console.log(dataset);
    }
});
console.log(dataset);//debug:undefined

{"id":1, "name":"alice", "age":20}

//加载json数据
var dataset;
d3.json('./assets/data/demo.json', function (json) {
    console.log(json);
});

//创建SVG元素
var w = 500, h = 500;
var svg = d3.select('body')
    .append('svg')
    .attr('width', w)
    .attr('height', h);

var dataset = [10, 20, 30, 40, 50, 60, 70];//半径
//创建圆形
var circles = svg.selectAll('.circle')
    .data(dataset)
    .enter()
    .append('circle');

circles.attr('cx', function (d, i) {
    return i * 50 + 25;
})
    .attr('cy', h / 2)
    .attr('r', function (d) {
        return d;
    })
    //填充
    .attr('fill', 'yellow')
    //描边
    .attr('stroke', 'orange')
    .attr('stroke-width', function (d) {
        return d / 3;
    });

![Uploading image_806296.png . . .]

//条形图
var w = 500, h = 500, barPadding = 1;
var svg = d3.select('body').append('svg').attr('width', w).attr('height', h);
//绑定数据
var dataset = [15, 20, 14, 19, 40, 20, 90, 55, 42];
var len = dataset.length;
//创建矩形
var rect = svg.selectAll('.rect')
    .data(dataset)
    .enter()
    .append('rect');
//矩形属性
rect.attr('x', function (d, i) {
    return i * (w / len);
})
    .attr('y', function (d, i) {
        return h - d;
    })
    .attr('width', w / len - barPadding)
    .attr('height', 100)
    .attr('fill', function (d) {
        return 'rgb(0,0,' + (d * 10) + ')';
    });
//值标签
var text = svg.selectAll('.text')
    .data(dataset)
    .enter()
    .append('text')
    .text(function (d) {
        return d;
    });
text.attr('x', function (d, i) {
    return i * (w / len) + 15;
})
    .attr('y', function (d) {
        return (h - d) + (h - (h - d)) / 2 + 2;
    })
    .attr('font-family', 'sans-serif')
    .attr('font-size', '16px')
    .attr('fill', 'white');

image.png

/*比例尺*/
var w = 500,h = 500, padding = 20;
var svg = d3.select('body').append('svg').attr('width',w).attr('height',h);
//定义绑定数据
var dataset = [];
var xRange = Math.random()*1000;
var yRange = Math.random()*1000;
var len = 50;
for(var i=0; i<len; i++){
    var num1 = Math.floor(Math.random() * xRange);
    var num2 = Math.floor(Math.random() * yRange);
    dataset.push([num1,num2]);
}
//定义水平线性比例尺
var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d){
        return d[0];
    })])
    .range([padding, w-padding*2]);
//定义垂直线性比例尺
var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d){
        return d[1];
    })])
    .range([h-padding,padding]);
//定义半径线性比例尺
var rScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d){
        return d[1];
    })])
    .range([2,5]);
//定义底部水平x坐标轴
var xAxis = d3.axisBottom()
    .scale(xScale)
    .ticks(5);
//定义左侧垂直y坐标轴
var yAxis = d3.axisLeft()
    .scale(yScale)
    .ticks(5);
//创建圆形
var circle = svg.selectAll('.circle')
    .data(dataset)
    .enter()
    .append('circle');
circle.attr('cx', function(d){
    return xScale(d[0]);
})
    .attr('cy', function(d){
        return yScale(d[1]);
    })
    .attr('r', function(d){
        return rScale(d[1]);
    })
    .attr('fill','red');
//创建值标签
svg.selectAll('.text')
    .data(dataset)
    .enter()
    .append('text')
    .text(function(d){
        return d[0]+','+d[1];
    })
    .attr('x', function(d){
        return xScale(d[0]);
    })
    .attr('y', function(d){
        return yScale(d[1]);
    })
    .attr('font-family','sans-serif')
    .attr('font-size', '12px')
    .attr('fill','red');
//创建x轴
svg.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,'+(h-padding)+')')
    .call(xAxis);
//创建y轴
svg.append('g')
    .attr('class','axis')
    .attr('transform', 'translate('+padding+',0)')
    .call(yAxis);

image.png

var w=960,h=960;
var svg = d3.select('body').append('svg').attr('width',w).attr('height',h);
var format = d3.format(',d');
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var pack = d3.pack().size([w,h]).padding(1.5);

d3.csv('./assets/data/flare.csv', function(d){
    d.value += d.value;
    if(d.value){
        return d;
    }
},function(error,data){
    if(error){
        throw error;
    }

    var root = d3.hierarchy({children:data})
        .sum(function(d){
            return d.value;
        })
        .each(function(d){
            if(id = d.data.id){
                var id, i=id.lastIndexOf('.');
                d.id = id;
                d.package = id.slice(0,1);
                d.class = id.slice(i+1);
            }
        });

    var node = svg.selectAll('.node')
        .data(pack(root).leaves())
        .enter()
        .append('g')
        .attr('class','node')
        .attr('transform', function(d){
            return 'translate('+d.x+','+d.y+')';
        })

    node.append('circle')
        .attr('id', function(d){
            return d.id;
        })
        .attr('r', function(d){
            return d.r;
        })
        .style('fill', function(d){
            return color(d.package);
        });

    node.append('clipPath')
        .attr('id', function(d){
            return 'clip-'+d.id;
        })
        .append('use')
        .attr('xlink:href', function(d){
            return '#'+d.id;
        });

    node.append('text')
        .attr('clip-path', function(d){
            return 'url(#clip'+d.id+')';
        })
        .selectAll('tspan')
        .data(function(d){
            return d.class.split(/(?=[A-Z][^A-Z])/g);
        })
        .enter()
        .append('tspan')
        .attr('x',0)
        .attr('y', function(d,i,nodes){
            return 13+(i-nodes.length/2-0.5)*10;
        })
        .text(function(d){
            return d;
        });

    node.append('title')
        .text(function(d){
            return d.id+'\n'+format(d.value);
        });
});