select
style
d3.select("#container")
.append('p')
.text("hello")
.style("color","red");
一个简单的代码:
<svg width="100" height="100">
<circle r="50" cx="50" cy="50" stroke="yellow"
stroke-width="4"
fill="red"></circle>
</svg>
上面的代码是通过原生的生成的,效果如下:
const canvas = d3.select("#container");
// add an svg
const svg = canvas.append("svg");
svg.attr("width", 100)
.attr("height", 100);
const circle = svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",50)
.attr("fill","blue")
// circle
svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",50)
.attr("fill","blue")
// rect
svg.append("rect")
.attr("x",50)
.attr("rx",50)
.attr("y",10)
.attr("ry",10)
.attr("width",10)
.attr("height",100)
.attr("fill","red")
// line
svg.append("line")
.attr("x1","129")
.attr("x2","45")
.attr("y1","300")
.attr("y2","100")
.attr("stroke","gray")
// text
svg.append("text")
.attr("x",30)
.attr("y",100)
.attr("font-size",20)
.attr("file","gray")
.text("hello")
let dataArr = [4, 15, 34];
// add an svg element
const svg = canvas.append("svg");
svg.attr("width", 600)
.attr("height", 600);
const rect = svg.append("rect");
rect.attr("width", "24")
.data(dataArr)
.attr("height", "100")
.attr("fill", "gray")
.attr("x", function (d, i) { return d * 5; })
.attr("y", function (d, i) { return d * 10; })
// what are d and i, the d mean data, and the i mean index
我们来画一个柱状图
let dataArr = [3, 10, 48, 31];
// add an svg element
const svg = canvas.append("svg")
.attr("width", 600)
.attr("height", 600);
const rect = svg.selectAll("rect");
// 这里必须是selectAll,不然会出错的。
rect.data(dataArr)
.enter()
.append("rect")
.attr("fill", "orange")
.attr("x", function (d, i) {
console.log(d)
return i * 25;
})
.attr("width", "20")
.attr("y", function (d, i) {
return 100 - (d * 3);
})
.attr("height", function (d, i) {
return d * 3;
})
console.log(rect)
使用的数据:
let data = {
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "C1",
"value": 100
},
{
"name": "C2",
"value": 300
},
{
"name": "C3",
"value": 200
}
]
},
{
"name": "B2",
"value": 200
}
]
};
代码1
<div id="content">
<svg width="400" height="220">
<g transform="translate(5, 5)">
<g class="links"></g>
<g class="nodes"></g>
</g>
</svg>
</div>
返回一个扁平的数组来表达root的子孙后代,而root.links()则返回一个扁平的对象数组来表达所有的父子links
代码2
<script>
let data = {
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "C1",
"value": 100
},
{
"name": "C2",
"value": 300
},
{
"name": "C3",
"value": 200
}
]
},
{
"name": "B2",
"value": 200
}
]
};
/* 数据是:A1 底下 有 B1 和 B2 ,B1 底下 有 C1 C2 C3*/
let root = d3.hierarchy(data);
console.log(root);
let leaves = root.leaves();
console.log(leaves);
let links = root.links();
console.log(links);
let path = root.path(root.children[0].children[1]);
console.log(path);
let descendants = root.descendants();
console.log("descendants: ", descendants);
// 返回一个扁平的数组来表达root的子孙后代,而root.links()则返回一个扁平的对象数组来表达所有的父子links
let treeLayout = d3.tree();
// 使用size设置
treeLayout.size([400, 200]);
//随后我们可以调用treeLayout函数,传入我们的hierarchy object root:
treeLayout(root);
// 这个函数执行的结果是会将root的每一个node都增加上x和y的value
// let svg = d3.select("#content")
// .append("svg")
// .attr("width", "100%")
// .attr("height", "100%");
d3.select('svg g.nodes')
.selectAll('circle.node')
.data(root.descendants())
.enter()
.append('circle')
.classed('node', true)
.attr('cx', function (d) {
return d.x;
})
.attr('cy', function (d) {
return d.y;
})
.attr('r', 4);
// Links
d3.select('svg g.links')
.selectAll('line.link')
.data(root.links())
.enter()
.append('line')
.classed('link', true)
.attr('x1', function (d) {
return d.source.x;
})
.attr('y1', function (d) {
return d.source.y;
})
.attr('x2', function (d) {
return d.target.x;
})
.attr('y2', function (d) {
return d.target.y;
});
</script>
var myScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 600]);
d3将创建一个myScale函数用于接收[0,10]之间的数据输入(domain)映射为[0,600]像素的位置数据(range)