寫類似天眼查的 “股權穿透圖”,樹形結構。
https://codepen.io/myGitHubForJava/pen/EMEPdW
https://codepen.io/bendcarmen/pen/BzZGqw
https://codepen.io/TheSeTh/pen/RGBKxx
https://codepen.io/zhulinpinyu/pen/EaZrmM/
下面是去掉按鈕後的效果。還行。但是有個問題，我自己的頁面是個有滾動條的網頁。那麼這個樹形的滾動效果，和滾動條的重合了。很不好。還有拖動。都不知道拖動到哪裏去了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - d3樹圖</title>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<svg width='1280' height="860"></svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js">
var dataset = {
name: "中國",
children: [
{
name: "浙江",
children: [
{ name: "杭州", value: 100 },
{ name: "寧波", value: 100 },
{ name: "溫州", value: 100 },
{ name: "紹興", value: 100 }] },
{
name: "廣西",
children: [
{
name: "桂林",
children: [
{ name: "秀峯區", value: 100 },
{ name: "疊彩區", value: 100 },
{ name: "象山區", value: 100 },
{ name: "七星區", value: 100 }] },
{ name: "南寧", value: 100 },
{ name: "柳州", value: 100 },
{ name: "防城港", value: 100 }] },
{
name: "黑龍江",
children: [
{ name: "哈爾濱", value: 100 },
{ name: "齊齊哈爾", value: 100 },
{ name: "牡丹江", value: 100 },
{ name: "大慶", value: 100 }] },
{
name: "新疆",
children:
[
{ name: "烏魯木齊" },
{ name: "克拉瑪依" },
{ name: "吐魯番" },
{ name: "哈密" }] }] };
var marge = { top: 60, bottom: 0, left: 30, right: 0 };
var svg = d3.select("svg");
var width = svg.attr("width");
var height = svg.attr("height");
var g = svg.append("g").
attr("transform", "translate(" + marge.top + "," + marge.left + ")");
let hierarchyData = d3.hierarchy(dataset).
sum(function (d) {
return d.value;
});
let tree = d3.tree().
size([width - 100, height - 100]).
separation(function (a, b) {
return a.parent == b.parent ? 1 : 1;
});
let treeData = tree(hierarchyData);
let nodes = treeData.descendants().map(item => {
item.show = false;
return item;
});
let links = treeData.links();
let beziler_generator = d3.linkHorizontal().
x(function (d) {
return d.x;
}).
y(function (d) {
return d.y;
});
// 邊
g.append('g').
selectAll('path').
data(links).
enter().
append('path').
attr('d', function (d, i) {
var start = { x: d.source.x, y: d.source.y };
var end = { x: d.target.x, y: d.target.y };
return beziler_generator({ source: start, target: end });
}).
attr('fill', 'none').
attr('stroke', 'blue').
attr('stroke-width', '1');
let gs = g.append('g').
selectAll('g').
data(nodes).
enter().
append('g').
attr('transform', function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
}).
attr('cursor', 'pointer').
on('mouseover', function (d, i, context) {
console.log(this);
d3.select(this).select('.detail').style('display', 'block');
}).
on('mouseout', function () {
d3.select(this).select('.detail').style('display', 'none');
});
gs.append('text').
attr('x', function (d) {
return 30 - d.data.name.length * 8;
}).
text(function (d) {
return d.data.name;
}).
attr('class', 'detail').
attr('style', function (d) {
return d.show ? 'display:block' : 'display:none';
});
gs.append('circle').
attr('r', 6).
attr('fill', 'white').
attr('stroke', 'blue').
attr('stroke-width', 1).
attr('x', function (d) {
return d.x;
});
gs.append('text').
attr('x', function (d) {
return -d.data.name.length * 8;
}).
attr('y', function (d) {
return d.children ? -10 : 20;
}).
text(function (d) {
return d.data.name;
});
let zoom = d3.zoom().scaleExtent([1, 5]).extent([[0, 0], [width, height]]).on('zoom', zoomed);
zoom(svg);
function zoomed(d, i, context) {
g.attr('transform', d3.zoomTransform(this));
// svg.call(zoom.transform, d3.zoomTransform(this))
}
console.log(1, treeData, nodes, links);
//# sourceURL=pen.js
</script>
</body>
</html>