svg 树状图_树状图(关系图)

树状图(竖着)

d3.json("city.json", function (err, data) {

const width = 700, height = 800, padding = {top: 60, left: 30};

const svg = d3.select("body").append("svg")

.attr("width", width + padding.left * 2)

.attr("height", height + padding.top * 2).append("g")

.attr("transform", "translate(40,50)");

const tree = d3.layout.tree()

.size([width, height - 200])

.separation(function (a, b) {

//点与点之间的间隔比例

return a.parent === b.parent ? 1: 2;

});

// nodes:

// [{name: "中国",

// children: Array(3),

// depth: 0,

// x: 350,

// y: 0}

// ,...]

const nodes = tree.nodes(data);

// links:

// [

// {source:node,

// target:node}

// ,...]

const color = d3.scale.category20();

const links = tree.links(nodes);

const diagonal = d3.svg.diagonal()

.projection(function (d) {

return [d.x, d.y]

});

const link = svg.selectAll(".link")

.data(links)

.enter()

.append("path")

.attr("class", "link")

.attr("d", diagonal)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 2);

const node = svg.selectAll(".node")

.data(nodes)

.enter()

.append("g")

.attr("class", "node")

.attr("transform", function (d) {

return "translate(" + d.x + "," + d.y + ")";

});

node.append("circle")

.attr("r", 4.5)

.attr("fill",function (d,i) {

return color(i);

});

node.append("text")

.attr("dy", function (d) {

return d.children ? -14 : 20;

})

.style("text-anchor","middle")

.text(function (d) {

return d.name;

})

})

结果:

竖着

横着

d3.json("city.json", function (err, data) {

const width = 700, height = 600, padding = {top: 60, left: 30};

const svg = d3.select("body").append("svg")

.attr("width", width + padding.left * 2)

.attr("height", height + padding.top * 2).append("g")

.attr("transform", "translate(100,0)");

const tree = d3.layout.tree()

.size([width, height - 200])

.separation(function (a, b) {

console.log(a);

console.log(b);

return a.parent === b.parent ? 1 : 2;

});

// nodes:

// [{name: "中国",

// children: Array(3),

// depth: 0,

// x: 350,

// y: 0}

// ,...]

const nodes = tree.nodes(data);

// links:

// [

// {source:node,

// target:node}

// ,...]

const links = tree.links(nodes);

const diagonal = d3.svg.diagonal()

.projection(function (d) {

return [d.y, d.x]

});

const link = svg.selectAll(".link")

.data(links)

.enter()

.append("path")

.attr("class", "link")

.attr("d", diagonal)

.attr("fill", "none")

.attr("stroke", "purple")

.attr("stroke-width", 2);

const node = svg.selectAll(".node")

.data(nodes)

.enter()

.append("g")

.attr("class", "node")

.attr("transform", function (d) {

return "translate(" + d.y + "," + d.x + ")";

});

node.append("circle")

.attr("r", 4.5);

node.append("text")

.attr("dx", function (d) {

return d.children ? -8 : 8;

})

.attr("dy", 3)

.style("text-anchor", function (d) {

return d.children ? "end" : "start"

})

.text(function (d) {

return d.name;

})

})

结果:

横着