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');
/*比例尺*/
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
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);
});
});