我正在嘗試在 d3 樹中實作分頁。任何人都可以請幫助我。
請在我的代碼下方找到當前和預期輸出的螢屏截圖。
data_tree 是輸入資料變數。這被下面的腳本讀取并生成層次結構樹，如螢屏截圖所示
data_tree = {
"Type": "Root",
"id": 0,
"name": "ERM",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Stem",
"id": 4,
"name": "RG",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Stem",
"id": 5,
"name": "WCR F",
"ParentDocType": "WholesaleCreditRisk",
"children": [{
"Type": "Stem",
"id": 50,
"name": "WCR P",
"ParentDocType": "WholesaleCreditRisk",
"children": [{
"Type": "Leaf",
"id": 8,
"name": "IBQA SD",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 9,
"name": "WCR EMS",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 28,
"name": "WCR DD & RGEC",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 29,
"name": "PMM",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 30,
"name": "PRRM",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 31,
"name": "WCR Rep",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 32,
"name": "RR",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 33,
"name": "CO",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 34,
"name": "LD",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 35,
"name": "ESRM",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 36,
"name": "TPCR",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 37,
"name": "InterA",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 38,
"name": "DR",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 39,
"name": "MAR",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 40,
"name": "BSLM",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 51,
"name": "CCR Meas",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 52,
"name": "WLP",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 53,
"name": "TTS Pro",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 54,
"name": "CI",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 55,
"name": "LL",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 56,
"name": "SP",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 57,
"name": "CC",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 58,
"name": "CRE",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 59,
"name": "Sec",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
},
{
"Type": "Leaf",
"id": 60,
"name": "SS",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
}
]
}]
},
{
"Type": "Stem",
"id": 10,
"name": "GCMP",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Leaf",
"id": 11,
"name": "WCR CMS",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
}]
},
{
"Type": "Stem",
"id": 12,
"name": "REAVP",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Stem",
"id": 13,
"name": "CREAVS",
"ParentDocType": "WholesaleCreditRisk",
"children": [{
"Type": "Leaf",
"id": 14,
"name": "CREAVP",
"ParentDocType": "WholesaleCreditRisk",
"children": [
]
}]
}]
}
]
}]
};
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var root =JSON.parse(data_tree);
var i = 0,
duration = 750,
rectW = 150,
rectH = 50;
//var tree = d3.layout.tree().nodeSize([70, 40]);
var nodeWidth = 150;
var nodeHeight = 50;
var horizontalSeparationBetweenNodes = 16;
var verticalSeparationBetweenNodes = 128;
var tree = d3.layout.tree()
.nodeSize([nodeWidth horizontalSeparationBetweenNodes, nodeHeight verticalSeparationBetweenNodes])
.separation(function(a, b) {
return a.parent == b.parent ? 1 : 1.25;
});
/*var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.x rectW / 2, d.y rectH / 6];
});*/
var diagonal = d3.svg.diagonal()
.target(function(d) {
var o = d.target;
o.y = o.y - 50
return o;
})
.projection(function(d) {
return [d.x rectW / 2, d.y rectH];
});
var svg = d3.select("#body").append("svg").attr("width", document.getElementById("body").style.width).attr("height", document.getElementById("body").style.height)
.call(zm = d3.behavior.zoom().scaleExtent([0.5, 3]).on("zoom", redraw)).append("g")
.attr("transform", "translate(" 650 "," 20 ")scale(0.7)");
//necessary so that zoom knows where to zoom and unzoom from
zm.translate([650, 20]);
root.x0 = 0;
root.y0 = height / 2;
d3.select("#myCheckbox").on("change", enableLink);
enableLink(root);
d3.select("#body").style("height", "800px");
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s /).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
x = text.attr("x"),
y = text.attr("y"),
dy = 0, //parseFloat(text.attr("dy")),
tspan = text.text(null)
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", dy "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", lineNumber * lineHeight dy "em")
.text(word);
}
}
});
}
function enableLink(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 125;
});
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" source.x0 "," source.y0 ")";
}).on("click", click);
nodeEnter.append("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "blue")
.attr("rx", 4)
.attr("ry", 4)
.attr("stroke-width", 2)
.style("fill", function(d) {
if (d.ParentDocType == "EnterpriseWide") return "darkblue";
if (d.ParentDocType == "WholesaleCreditRisk") return "blue";
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text")
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.name;
}).call(wrap, rectW - 10);
nodeEnter
.append("a")
.attr("xlink:href", function(d) {
return d.url;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" d.x "," d.y ")";
});
nodeUpdate.select("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "blue")
.attr("stroke-width", 2)
.style("fill", function(d) {
if (d.ParentDocType == "EnterpriseWide") return "darkblue";
if (d.ParentDocType == "WholesaleCreditRisk") return "blue";
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" source.x "," source.y ")";
})
.remove();
nodeExit.select("rect")
.attr("width", rectW)
.attr("height", rectH)
//.attr("width", bbox.getBBox().width)""
//.attr("height", bbox.getBBox().height)
.attr("stroke", "blue")
.attr("stroke-width", 2);
nodeExit.select("text");
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) {
d.y = d.y 100;
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0 100
};
return diagonal({
source: o,
target: o
});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y 100;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
enableLink(d);
}
//Redraw for zoom
function redraw() {
//console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" d3.event.translate ")"
" scale(" d3.event.scale ")");
}.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
fill: white;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
body {
overflow: hidden;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked .slider {
background-color: #2196F3;
}
input:focus .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.box {
float: left;
height: 20px;
width: 20px;
margin-bottom: 15px;
border: 1px solid black;
}
.darkblue {
background-color: darkblue;
}
.blue {
background-color: blue;
}<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>
</head>
<body>
<div id="body" style="border: 1px black solid; width:100%; height:600px;"></div>
</body>電流輸出 
預期產出
uj5u.com熱心網友回復：
var root = {
"Type": "Root",
"id": 0,
"name": "ERM",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Stem",
"id": 4,
"name": "RG",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Stem",
"id": 5,
"name": "WCR F",
"ParentDocType": "WholesaleCreditRisk",
"children": [{
"Type": "Stem",
"id": 50,
"name": "WCR P",
"ParentDocType": "WholesaleCreditRisk",
"children": [{
"Type": "Leaf",
"id": 8,
"name": "IBQA SD",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 9,
"name": "WCR EMS",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 28,
"name": "WCR DD & RGEC",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 29,
"name": "PMM",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 30,
"name": "PRRM",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 31,
"name": "WCR Rep",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 32,
"name": "RR",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 33,
"name": "CO",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 34,
"name": "LD",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 35,
"name": "ESRM",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 36,
"name": "TPCR",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 37,
"name": "InterA",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 38,
"name": "DR",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 39,
"name": "MAR",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 40,
"name": "BSLM",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 51,
"name": "CCR Meas",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 52,
"name": "WLP",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 53,
"name": "TTS Pro",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 54,
"name": "CI",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 55,
"name": "LL",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 56,
"name": "SP",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 57,
"name": "CC",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 58,
"name": "CRE",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 59,
"name": "Sec",
"ParentDocType": "WholesaleCreditRisk",
"children": []
},
{
"Type": "Leaf",
"id": 60,
"name": "SS",
"ParentDocType": "WholesaleCreditRisk",
"children": []
}
]
}]
},
{
"Type": "Stem",
"id": 10,
"name": "GCMP",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Leaf",
"id": 11,
"name": "WCR CMS",
"ParentDocType": "WholesaleCreditRisk",
"children": []
}]
},
{
"Type": "Stem",
"id": 12,
"name": "REAVP",
"ParentDocType": "EnterpriseWide",
"children": [{
"Type": "Stem",
"id": 13,
"name": "CREAVS",
"ParentDocType": "WholesaleCreditRisk",
"children": [{
"Type": "Leaf",
"id": 14,
"name": "CREAVP",
"ParentDocType": "WholesaleCreditRisk",
"children": []
}]
}]
}
]
}]
};
function pageNodes(d) {
if (d.children) {
d.children.forEach(c => pageNodes(c));
if (d.children.length > pageNodes.maxNode) {
d.pages = {}
const count = pageNodes.maxNode - 1;
const l = Math.ceil(d.children.length / count);
for (let i = 0; i < l; i ) {
let startRange = i * count;
let endRange = i * count count;
d.pages[i] = d.children.slice(startRange, endRange);
pageNodes.addNode(d.pages[i], "More...", {
__next: i != (l - 1) ? i 1 : 0,
});
}
d.children = d.pages[0];
}
}
}
pageNodes.maxNode = 5;
pageNodes.addNode = function(children, name, more) {
let node = Object.assign({
Type: "Leaf",
id: children[children.length - 1].id 10000,
ParentDocType: children[children.length - 1].ParentDocType,
name: name,
}, more);
children.push(node);
};
root.children.forEach(c => pageNodes(c));
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = window.innerWidth - margin.right - margin.left,
height = window.innerHeight - margin.top - margin.bottom;
var i = 0,
duration = 750,
rectW = 150,
rectH = 50;
// var tree = d3.layout.tree().nodeSize([70, 40]);
var nodeWidth = 150;
var nodeHeight = 50;
var horizontalSeparationBetweenNodes = 16;
var verticalSeparationBetweenNodes = 128;
var tree = d3.layout.tree()
.nodeSize([nodeWidth horizontalSeparationBetweenNodes, nodeHeight verticalSeparationBetweenNodes])
.separation(function(a, b) {
return a.parent == b.parent ? 1 : 1.25;
});
/*var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.x rectW / 2, d.y rectH / 6];
});*/
var diagonal = d3.svg.diagonal()
.target(function(d) {
var o = d.target;
o.y = o.y - 50
return o;
})
.projection(function(d) {
return [d.x rectW / 2, d.y rectH];
});
var svg = d3.select("#body").append("svg").attr("width", document.getElementById("body").style.width).attr("height", document.getElementById("body").style.height)
.call(zm = d3.behavior.zoom().scaleExtent([0.5, 3]).on("zoom", redraw)).append("g")
.attr("transform", "translate(" 650 "," 20 ")scale(0.7)");
//necessary so that zoom knows where to zoom and unzoom from
zm.translate([650, 20]);
root.x0 = 0;
root.y0 = height / 2;
d3.select("#myCheckbox").on("change", enableLink);
enableLink(root);
d3.select("#body").style("height", "800px");
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s /).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
x = text.attr("x"),
y = text.attr("y"),
dy = 0, //parseFloat(text.attr("dy")),
tspan = text.text(null)
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", dy "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", lineNumber * lineHeight dy "em")
.text(word);
}
}
});
}
function enableLink(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 125;
});
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" source.x0 "," source.y0 ")";
}).on("click", click);
nodeEnter.append("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "blue")
.attr("rx", 4)
.attr("ry", 4)
.attr("stroke-width", 2)
.style("fill", function(d) {
if (d.ParentDocType == "EnterpriseWide") return "darkblue";
if (d.ParentDocType == "WholesaleCreditRisk") return "blue";
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text")
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.name;
}).call(wrap, rectW - 10);
nodeEnter
.append("a")
.attr("xlink:href", function(d) {
return d.url;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" d.x "," d.y ")";
});
nodeUpdate.select("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "blue")
.attr("stroke-width", 2)
.style("fill", function(d) {
if (d.ParentDocType == "EnterpriseWide") return "darkblue";
if (d.ParentDocType == "WholesaleCreditRisk") return "blue";
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" source.x "," source.y ")";
})
.remove();
nodeExit.select("rect")
.attr("width", rectW)
.attr("height", rectH)
//.attr("width", bbox.getBBox().width)""
//.attr("height", bbox.getBBox().height)
.attr("stroke", "blue")
.attr("stroke-width", 2);
nodeExit.select("text");
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) {
d.y = d.y 100;
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0 100
};
return diagonal({
source: o,
target: o
});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y 100;
});
}
// Toggle children on click.
function click(d) {
if (d.hasOwnProperty('__next')) {
d.parent.children = d.parent.pages[d.__next];
} else if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
enableLink(d);
}
//Redraw for zoom
function redraw() {
//console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" d3.event.translate ")"
" scale(" d3.event.scale ")");
}.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
fill: white;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
body {
overflow: hidden;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked .slider {
background-color: #2196F3;
}
input:focus .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.box {
float: left;
height: 20px;
width: 20px;
margin-bottom: 15px;
border: 1px solid black;
}
.darkblue {
background-color: darkblue;
}
.blue {
background-color: blue;
}<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="body" style="border: 1px black solid; width:100%; height:600px;"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/471084.html