代码是摘抄的，找不找网址了，
没有研究过力导向图 仅作参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=https://d3js.org/d3.v4.js></script>
<style>
body,html{
cursor: pointer;
width: 100%;
height: 100%;
margin:0;
box-sizing: border-box;
overflow: hidden;
}
.node {
cursor: pointer;
}
.node circle {
fill: none;
stroke: #fff;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link{
fill:none;
stroke:#ccc;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.tree{
height: 100%;
margin: 0 auto;
background: #E0E0E0;
box-sizing: border-box;
}
.tree svg{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<svg height=1000 id=mindmap-svg width=1300></svg>
<!--<svg class="chart"></svg>-->
<script>
!function () {
var n = d3.select("#mindmap-svg"), t = n.attr("width"), a = n.attr("height"), d = new MindMap;
d.svg(n), d.size(t, a),
d3.json("tree2.json", function (n, t) {
n ? d3.json("tree2.json", function (n, t) {
if (n) throw n;
console.log(n)
console.log(t)
d.data(t), d.render()
}) : (d.data(t), d.render())
})
}()
function MindMap() {
function t() {
r(), a([0, 0])
}
function r() {
x = d3.tree().size([360, 120]).separation(function (t, e) {
return (t.parent == e.parent ? 1 : 2) / t.depth
});
g = d3.hierarchy(p);
g.descendants().forEach(function (t, e) {
t.data.closed = "false" == t.data.closed, t.data.closed && i(t)
});
m = u.select(".gmind");
m.empty() && (m = u.append("g").attr("class", "gmind"));
v = m.select(".glink");
v.empty() && (v = m.append("g").attr("class", "glink"));
k = m.select(".gnode");
k.empty() && (k = m.append("g").attr("class", "gnode"));
v.attr("transform", "translate(" + d / 2 + "," + f / 2 + ")");
k.attr("transform", "translate(" + d / 2 + "," + f / 2 + ")");
var t = d3.zoom().on("zoom", function () {
var t = "scale(" + d3.event.transform.k + ")", e = "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ")";
m.attr("transform", e + t)
});
u.call(t)
}
function n(t, e) {
var r = (t - 90) / 180 * Math.PI,
n = e;
return [n * Math.cos(r), n * Math.sin(r)]
}
function a(t) {
x(g),
y = g.descendants(),
h = g.links(),
y.forEach(function (t) {
t.y = 120 * t.depth,
t.pos = n(t.x, t.y)
});
for (var e = 0; e < y.length; e++) y[e].id || (y[e].id = b, b++);
for (var e = 0; e < h.length; e++) h[e].id || (h[e].id = M, M++);
var r = d3.scaleLinear().domain([0, 180, 360]).range([1, .3, 1]),
o = d3.scaleLinear().domain([0, 1, 5, 10]).range([13, 13, 6.5, 6.5]),
c = k.selectAll(".node").data(y, function (t) {
console.log(t)
return t.id
}),
u = c.enter(), d = c.exit(),
f = u.append("g").attr("class", "node").attr("transform", function (e) {
console.log(t)
console.log(e)
return "translate(" + t[0] + "," + t[1] + ")"
})
.on("click", function (t) {
d3.event.defaultPrevented || (i(t), a(t.prevPos))
});
f.append("circle").attr("r", 0).style("fill", function (t) {
var e = "";
return t.depth > 1 ? (e = d3.hsl(t.parent.color), e = e.brighter(.5), e.l = r(t.x)) : e = t.depth > 0 ? d3.hsl(t.x, 1, .5) : "#FFFFFF", t.color = e + "", t.color + ""
}).style("stroke-width", 2)
.style("stroke", "black")
.style("opacity", 0);
var p = f.merge(c).transition().duration(600).attr("transform", function (t) {
return "translate(" + t.pos[0] + "," + t.pos[1] + ")"
});
p.select("circle").attr("r", function (t) {
return o(t.depth)
}).style("opacity", 1), p.select("text").attr("dy", function (t) {
return o(t.depth)
}).style("fill-opacity", 0);
var m = d.transition().duration(600).attr("transform", function (e) {
return "translate(" + t[0] + "," + t[1] + ")"
}).remove();
m.select("circle").style("opacity", 0).attr("r", 0), m.select("text").style("fill-opacity", 0);
var w = v.selectAll(".link").data(h, function (t) {
return t.target.id
}),
F = w.enter(),
z = w.exit();
F.append("path").attr("class", "link").attr("fill", "none").attr("stroke", "rgba(20,20,20,1)").attr("stroke-width", 1).attr("opacity", 0).attr("d", function (e) {
var r = {x: t[0], y: t[1]};
return s({source: r, target: r})
}).merge(w).transition().duration(600).attr("opacity", 1).attr("d", function (t) {
var e = {x: t.source.pos[0], y: t.source.pos[1]}, r = {x: t.target.pos[0], y: t.target.pos[1]};
return "M" + e.x + "," + e.y + "L" + r.x + "," + r.y
}),
z.transition().duration(600).attr("opacity", 0).attr("d", function (e) {
var r = {x: t[0], y: t[1]}, n = {x: t[0], y: t[1]};
return "M" + r.x + "," + r.y + "L" + n.x + "," + n.y
}).remove(),
y.forEach(function (t) {
t.prevPos = [t.pos[0], t.pos[1]]
})
}
function s(t) {
return "M" + t.source.x + "," + t.source.y + "C" + (t.source.x + t.target.x) / 2 + "," + t.source.y + " " + (t.source.x + t.target.x) / 2 + "," + t.target.y + " " + t.target.x + "," + t.target.y
}
function i(t) {
t.children ? (t._children = t.children, t.children = null, t.data.closed = !0) : (t.children = t._children, t._children = null, t.data.closed = !1)
}
var u, d, f, p, y, h, x, g, m, v, k, b = 0, M = 0;
this.svg = function (t) {
if (arguments.length < 1) return u;
u = t
}, this.data = function (t) {
if (arguments.length < 1) return p;
p = t
}, this.size = function (t, e) {
if (arguments.length < 2) return [d, f];
d = t, f = e
}, this.getRoot = function () {
return g
}, this.render = t, this.update = null
}
</script>
</body>
</html>
{
"name":"中国",
"children":
[
{
"name":"3BMEXzi" ,
"children":[
{"name":"杭州",
"children":[
{"name":"宁波"},
{"name":"温州"}
]
}
]
},
{
"name":"广西" ,
"children":
[
{
"name":"桂林"
},
{"name":"南宁"},
{"name":"柳州"},
{"name":"防城港"},
{"name":"浙江"}
]
},
{
"name":"黑龙江"
},
{
"name":"新疆6" ,
"children":[
{"name":"乌鲁木齐"},
{"name":"克拉玛依"},
{"name":"吐鲁番"},
{"name":"哈密"}
]}
]
}
2651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
