我是getorgchart的新手并且正在开发类似组织结构图的位置结构，我在演示中只看到了基本的组织结构，我需要一个节点，当你点击它时，它会扩展并加载下的员工名字这个职位。我点击时可以调整节点的高度，但是，路径没有调整..我试图调整自定义主题大小的高度，但没有运气
<!DOCTYPE html>
<html>
<head>
<title>OrgChart | Create Your Own Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1">
<script src="/orgChart/getorgchart/getorgchart.js"></script>
<link href="/orgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="/orgChart/getorgchart/jspdf.debug.js"></script>
<script src="/orgChart/getorgchart/saveSvgAsPng.js"></script>
<script src="/orgChart/getorgchart/svg_to_pdf.js"></script>
<link rel="stylesheet" href="/orgChart/getorgchart/jquery-ui.css">
<script src="/orgChart/getorgchart/jquery-1.12.4.js"></script>
<script src="/orgChart/getorgchart/jquery-ui.js"></script>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
.get-text {
fill: #ffffff !important;
font-size: 60px !important;
}
.myCustomTheme-box {
fill: #FF8F32;
}
.reporters {
fill: #0072C6;
}
.reporters-text {
fill: #ffffff;
font-size: 20px;
}
.btn:hover #add,
.btn:hover #edit,
.btn:hover #del {
fill: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div id="people"></div>
</div>
<div id="dialog" title="Edit node">
<p>GetOrgChart is more customizable than you think. This is jquery
dialog.</p>
<input type="hidden" id="hdnId" />
<div>
<label for="txtName">name</label><br /><input id="txtName"
type="text" />
</div><br />
<div>
<label for="txtTitle">title</label><br /><input id="txtTitle"
type="text" />
</div><br />
<div>
<label for="txtMail">mail</label><br /><input id="txtMail"
type="email" />
</div><br />
<div>
<label for="txtCar">Car</label><br />
<select id="txtCar">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div><br />
<div>
<label for="txtHasDriverLicense">has driver license</label><br />
<input id="txtHasDriverLicense" type="checkbox" />
</div><br />
<input id="btnSave" type="button" value="save" />
</div>
<p><button>Download</button></p>
<p><button class="btn" id="expandOrCollapse">ExpandOrCollapse All</button>
</p>
<script type="text/javascript">
$("#dialog").dialog({
modal: true,
autoOpen: false,
show: {
effect: "explode",
duration: 200
},
hide: {
effect: "explode",
duration: 200
}
});
var btnAdd = '<g data-action="add" class="btn" transform="matrix(0.14,0,0,0.14,0,0)"><rect style="opacity:0" x="0" y="0" height="300" width="300" /><path id="add" fill="#686868" d="M149.996,0C67.157,0,0.001,67.158,0.001,149.997c0,82.837,67.156,150,149.995,150s150-67.163,150-150 C299.996,67.156,232.835,0,149.996,0z M149.996,59.147c25.031,0,45.326,20.292,45.326,45.325 c0,25.036-20.292,45.328-45.326,45.328s-45.325-20.292-45.325-45.328C104.671,79.439,124.965,59.147,149.996,59.147z M168.692,212.557h-0.001v16.41v2.028h-18.264h-0.864H83.86c0-44.674,24.302-60.571,40.245-74.843 c7.724,4.15,16.532,6.531,25.892,6.601c9.358-0.07,18.168-2.451,25.887-6.601c7.143,6.393,15.953,13.121,23.511,22.606h-7.275 v10.374v13.051h-13.054h-10.374V212.557z M218.902,228.967v23.425h-16.41v-23.425h-23.428v-16.41h23.428v-23.425H218.9v23.425 h23.423v16.41H218.902z"/></g>';
var btnEdit = '<g data-action="edit" class="btn" transform="matrix(0.14,0,0,0.14,50,0)"><rect style="opacity:0" x="0" y="0" height="300" width="300" /><path id="edit" fill="#686868" d="M149.996,0C67.157,0,0.001,67.161,0.001,149.997S67.157,300,149.996,300s150.003-67.163,150.003-150.003 S232.835,0,149.996,0z M221.302,107.945l-14.247,14.247l-29.001-28.999l-11.002,11.002l29.001,29.001l-71.132,71.126 l-28.999-28.996L84.92,186.328l28.999,28.999l-7.088,7.088l-0.135-0.135c-0.786,1.294-2.064,2.238-3.582,2.575l-27.043,6.03 c-0.405,0.091-0.817,0.135-1.224,0.135c-1.476,0-2.91-0.581-3.973-1.647c-1.364-1.359-1.932-3.322-1.512-5.203l6.027-27.035 c0.34-1.517,1.286-2.798,2.578-3.582l-0.137-0.137L192.3,78.941c1.678-1.675,4.404-1.675,6.082,0.005l22.922,22.917 C222.982,103.541,222.982,106.267,221.302,107.945z"/></g>';
var btnDel = '<g data-action="delete" class="btn" transform="matrix(0.14,0,0,0.14,100,0)"><rect style="opacity:0" x="0" y="0" height="300" width="300" /><path id="del" fill="#686868" d="M112.782,205.804c10.644,7.166,23.449,11.355,37.218,11.355c36.837,0,66.808-29.971,66.808-66.808 c0-13.769-4.189-26.574-11.355-37.218L112.782,205.804z"/> <path id="del" stroke="#686868" fill="#686868" d="M150,83.542c-36.839,0-66.808,29.969-66.808,66.808c0,15.595,5.384,29.946,14.374,41.326l93.758-93.758 C179.946,88.926,165.595,83.542,150,83.542z"/><path id="del" stroke="#686868" fill="#686868" d="M149.997,0C67.158,0,0.003,67.161,0.003,149.997S67.158,300,149.997,300s150-67.163,150-150.003S232.837,0,149.997,0z M150,237.907c-48.28,0-87.557-39.28-87.557-87.557c0-48.28,39.277-87.557,87.557-87.557c48.277,0,87.557,39.277,87.557,87.557 C237.557,198.627,198.277,237.907,150,237.907z"/></g>';
getOrgChart.themes.myCustomTheme =
{
size: [500, 200],
toolbarHeight: 46,
textPoints: [
{ x: 10, y: 120, width: 490 }
//{ x: 200, y: 75, width: 300 },
//{ x: 210, y: 105, width: 290 },
//{ x: 210, y: 135, width: 290 }
],
textPointsNoImage: [
{ x: 10, y: 120, width: 490 }
//{ x: 10, y: 40, width: 300 },
//{ x: 10, y: 65, width: 290 },
//{ x: 10, y: 90, width: 290 }
],
expandCollapseBtnRadius: 20,
defs: '<filter id="f1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>',
box: '<rect x="0" y="0" height="200" width="500" rx="10" ry="10" class="myCustomTheme-box" filter="url(#f1)" />',
//text: '<text width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>',
text: '<text width="[width]" class="get-text" x="[x]" y="[y]">[text]</text>',
//image: '<clipPath id="getMonicaClip"><circle cx="105" cy="65" r="85" /></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#getMonicaClip)" xlink:href="[href]" x="20" y="-20" height="170" width="170"/>',
//reporters: '<circle cx="290" cy="230" r="20" class="reporters"></circle><text class="reporters-text" text-anchor="middle" width="120" x="290" y="237">[reporters]</text>'
};
getOrgChart.themes.myCustomTheme.box += '<g transform="matrix(1,0,0,1,350,10)">'
+ btnAdd
+ btnEdit
+ btnDel
+ '</g>';
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
theme: "myCustomTheme",
gridView: true,
linkType: "M",
orientation: getOrgChart.RO_TOP,
enableEdit: false,
enableDetailsView: false,
enableGridView: true,
clickNodeEvent: clickNodHandler,
renderNodeEvent: renderNodHandler,
updatedEvent: function () {
init();
},
enablePrint: true,
scale: 0.5,
levelSeparation: 300,
primaryFields: ["name", "title", "phone", "mail"],
photoFields: ["image"],
dataSource: [
{ id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons@jourrapide.com", adress: "Atlanta, GA 30303", image: "/orgChart/getorgchart/images/f-11.jpg" },
{ id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson@jourrapide.com", image: "/orgChart/getorgchart/images/f-10.jpg" },
{ id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton@armyspy.com", image: "/orgChart/getorgchart/images/f-9.jpg" },
{ id: 4, parentId: 1, name: "Paul Shetler", title: "Teaching assistant", phone: "330-263-6439", mail: "shetler@rhyta.com", image: "/orgChart/getorgchart/images/f-5.jpg" },
{ id: 5, parentId: 2, name: "Rebecca Francis", title: "Welding machine setter", phone: "408-460-0589", image: "/orgChart/getorgchart/images/f-4.jpg" },
{ id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman@armyspy.com", image: "/orgChart/getorgchart/images/f-8.jpg" },
{ id: 7, parentId: 3, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges@teleworm.us", image: "/orgChart/getorgchart/images/f-7.jpg" }
<!-- { id: 8, parentId: 6, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter@teleworm.us", image: "/orgChart/getorgchart/images/f-6.jpg" }, -->
<!-- { id: 9, parentId: 7, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "/orgChart/getorgchart/images/f-3.jpg" }, -->
<!-- { id: 10, parentId: 7, name: "Callum Whitehouse", title: "Radar controller", phone: "847-474-8775", image: "/orgChart/getorgchart/images/f-2.jpg" } -->
]
});
function renderNodHandler(sender, args) {
for (var i = 0; i < args.content.length; i++) {
if (args.content[i].indexOf("[reporters]") != -1) {
args.content[i] = args.content[i].replace("[reporters]", args.node.children.length);
}
if(args.node.children.length === 0){
if(args.content[i].indexOf("reporters-text") != -1) {
args.content[i] = " ";
}
}
}
}
function clickNodHandler(sender, args) {
console.log(sender);
console.log(args);
var rect = document.getElementsByClassName('myCustomTheme-box')[args.node.id - 1];
rect.setAttribute('height', 300);
<!-- var svgDoc = document.getElementsByTagName('svg')[0]; -->
<!-- var gElements = svgDoc.querySelector('g'); -->
<!-- var index = 'get-level-' + (args.node.id - 2); -->
<!-- index += ' '; -->
<!-- var gNode = gElements.getElementsByClassName(index)[args.node.id - 2]; -->
<!-- gNode.setAttribute('transform', 'matrix(1,0,0,1,932.5,200)'); -->
}
document.querySelector("button").addEventListener("click", function () {
svg_to_pdf(document.querySelector("svg"), function (pdf) {
download_pdf('SVG.pdf', pdf.output('dataurlstring'));
});
});
document.getElementById("expandOrCollapse").addEventListener("click", function () {
orgChart.expandOrCollapse(1);
});
function getNodeByClickedBtn(el) {
while (el.parentNode) {
el = el.parentNode;
if (el.getAttribute("data-node-id"))
return el;
}
return null;
}
var init = function () {
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var nodeElement = getNodeByClickedBtn(this);
var action = this.getAttribute("data-action");
var id = nodeElement.getAttribute("data-node-id");
var node = orgChart.nodes[id];
switch (action) {
case "add":
orgChart.insertNode(id);
break;
case "edit":
document.getElementById("hdnId").value = node.id;
document.getElementById("txtName").value = node.data.name ? node.data.name : "";
document.getElementById("txtTitle").value = node.data.title ? node.data.title : "";
document.getElementById("txtMail").value = node.data.mail ? node.data.mail : "";
document.getElementById("txtCar").value = node.data.car ? node.data.car : "";
document.getElementById("txtHasDriverLicense").value = node.data.hasDriverLicense ? node.data.hasDriverLicense : "";
$("#dialog").dialog("open");
break;
case "delete":
orgChart.removeNode(id);
break;
}
});
}
}
init();
document.getElementById("btnSave").addEventListener("click", function () {
var node = orgChart.nodes[document.getElementById("hdnId").value];
node.data.name = document.getElementById("txtName").value;
node.data.title = document.getElementById("txtTitle").value;
node.data.mail = document.getElementById("txtMail").value;
node.data.car = document.getElementById("txtCar").value;
node.data.hasDriverLicense = document.getElementById("txtHasDriverLicense").value;
orgChart.updateNode(node.id, node.pid, node.data);
$("#dialog").dialog("close");
});
</script>
调整框的高度，但没有调整路径。它对路径完全没有影响。调整框的大小只会调整框的大小，但不会调整路径本身的大小。
var rect = document.getElementsByClassName('myCustomTheme-box')[args.node.id
- 1];
rect.setAttribute('height', 300);
有没有办法让它像截图一样？请帮助，谢谢
