Javascript 如何将标题、背景和边框作为svg外部图像添加到要下载的d3js树的克隆元素中

我有一个可以下载的d3js树，我想从外部的.svg文件中添加一个标题、Arabesque背景和Arabesque边框，以获得更好的视觉效果

我有3个外部文件：title_3.png（稍后我将使用svg等效文件）、background-F4EED7.svg和border_1.svg。我需要将标题居中放置在图形的中间，并根据生成的树的长度和深度调整标题的高度

实现这一目标的最佳方式是什么

var treeData=[{
“名称”：“顶级”，
“父项”：“null”，
“备注”：“是”，
“儿童”：[{
“名称”：“2级：A”，
“父级”：“顶级”，
“备注”：“是”，
“儿童”：[{
“姓名”：“人子”，
“家长”：“2级：A级”，
“备注”：“空”
},
{
“姓名”：“A的女儿”，
“家长”：“2级：A级”，
“备注”：“空”
}
]
},
{
“名称”：“2级：B级”，
“父级”：“顶级”，
“备注”：“空”
}
]
}];
//*************************************************************************************
// 1. 创建按钮
var button=document.createElement（“按钮”）；
button.innerHTML=“下载文件”；
//*************************************************************************************
//*************生成树形图*****************
var保证金={
前20名，
右:120,，
底数：20，
左：120
},
宽度=960-margin.right-margin.left，
高度=500-margin.top-margin.bottom；
var i=0，
rectW=100，
rectH=30，
持续时间=750，
根；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
//将x和y交换为垂直
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.x+rectW/2，d.y+rectH/2]；
});
var-gElement=document.createElementNS（d3.ns.prefix.svg，'g'）；
gElement.setAttribute（“id”、“fg”）；
控制台日志（gElement）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.append（函数（）{
回程凝胶；
})//.append（）的参数必须是函数，不能只向其传递元素。
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
根=树数据[0]；
root.x0=高度/2；
root.y0=0；
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“500px”）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*180；
});
//更新节点…
var node=svg.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
//在父节点的上一个位置输入任何新节点。
//将x和y交换为垂直
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+source.x0+”，“+source.y0+”）；
})
。开启（“点击”，点击）；
nodeEnter.append（“rect”）
//nodeEnter.append（“圆”）
//.attr（“r”，1e-6）
.attr（“宽度”，rectW）
.attr（“高度”，矩形）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{
返回d.children | | d.| U儿童？-13:13；
})
.attr（“dy”，“.35em”）
.attr（“文本锚定”，函数（d）{
返回d.children | d.| u children？“结束”：“开始”；
})
.文本（功能（d）{
返回d.name；
})
.样式（“填充不透明度”，1e-6）；
//筛选以仅在具有相关信息的节点上放置工具提示
var nodesWithInfo=nodenter.filter（函数（d）{
返回（d.备注！=“空”）
})
nodesWithInfo
.附加（“圆圈”）
.attr（“导出忽略”，true）
.attr（“cx”，96）
.attr（“cy”，7）
.attr（“r”，10）；
nodesWithInfo
.append（“文本”）
.attr（“导出忽略”，true）
.attr（“id”、“信息文本”）
.attr（“x”，96）
.attr（“y”，7）
.attr（“dy”，“.30em”）
.style（“字体样式”、“斜体”）
.style（“字体系列”、“衬线”）
.style（“字体大小”、“粗体”）
.文本（“i”）；
//将节点转换到其新位置。
//将x和y交换为垂直布局
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
//节点更新。选择（“圆圈”）
nodeUpdate.select（“rect”）
.attr（“宽度”，rectW）
.attr（“高度”，矩形）
.style（“笔划”、“黑色”）
//.attr（“r”，10）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
nodeUpdate.select（“文本”）
.attr（“x”，rectW/2）
.attr（“y”，矩形/2）
.attr（“dy”，“.35em”）
.attr（“文本锚定”、“中间”）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
//垂直开关x和y位置
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+source.x+”，“+source.y+”）；
})
.remove（）；
nodeExit.select（“rect”）
.attr（“宽度”，rectW）
.attr（“高度”，矩形）
.风格（“笔划”、“黑色”）；
//.attr（“r”，1e-6）；
nodeExit.select（“文本”）
.样式（“填充不透明度”，1e-6）；
//更新链接…
var link=svg.selectAll（“path.link”）
.数据（链接、功能（d）{
返回d.target.id；
});
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“笔划”，“#ccc”）
.attr（“填充”、“无”）
.attr（“笔划宽度”，“2px”）
.attr（“d”，函数（d）{
变量o={
x:source.x0，
y:source.y0
};
返回对角线({
资料来源：o，
目标：o
});