Javascript 将复杂的SVG元素添加到选择中
我有一个包含一些复杂SVG元素的交互式模式项目(包含许多子对象的组(Javascript 将复杂的SVG元素添加到选择中,javascript,d3.js,svg,Javascript,D3.js,Svg,我有一个包含一些复杂SVG元素的交互式模式项目(包含许多子对象的组(rect,path,text,…) 是否可以将此类元素的描述存储在变量中,并直接与.append()一起使用 对象的示例: <g id="Titre_x5F_A11"> <g> <g id="Cadre_3_"> <rect x="13.2" y="636" class="st14" width="157.5" height="26.8"/
rect
,path
,text
,…)
是否可以将此类元素的描述存储在变量中,并直接与.append()
一起使用
对象的示例:
<g id="Titre_x5F_A11">
<g>
<g id="Cadre_3_">
<rect x="13.2" y="636" class="st14" width="157.5" height="26.8"/>
<rect x="12.3" y="636" class="st15" width="13.7" height="26.8"/>
</g>
<g id="IN_3_">
<rect x="142.6" y="654.5" class="st16" width="10" height="5.7"/>
<text transform="matrix(0.9497 0 0 1 145.6079 658.4658)" class="st17 st4 st18">IN</text>
</g>
<g id="OUT_3_">
<rect x="155.9" y="654.5" class="st19" width="10" height="5.7"/>
<text transform="matrix(0.9497 0 0 1 156.8984 658.4434)" class="st17 st4 st18">OUT</text>
</g>
<rect x="28.2" y="637.7" class="st20" width="111.1" height="7.4"/>
<text id="TitreAction_18_" transform="matrix(0.9497 0 0 1 28.1768 643.1006)" class="st4 st21">A11 - & xxxxxe</text>
<rect x="28.2" y="646.7" class="st20" width="106.5" height="14.8"/>
<text id="DescrAction_3_" transform="matrix(0.9497 0 0 1 28.1768 650.082)" class="st22 st4 st18">A compléter</text>
<g id="IconePeople_3_">
<circle class="st23" cx="155" cy="644.8" r="6.5"/>
<path class="st24" d="M153.4,644.1c0.9,0.9,2.3,0.9,3.1,0c0.9-0.9,0.9-2.4,0-3.4c-0.9-0.9-2.3-0.9-3.1,0l0,0
C152.5,641.6,152.5,643.1,153.4,644.1z M151.2,649c1.1,0,6.6,0,7.7,0c1.1,0,0.5-1.1,0.5-1.1s-2.2-2.7-4.4-2.7
s-4.4,2.7-4.4,2.7l0,0C150.6,648,150.1,649,151.2,649z"/>
</g>
</g>
</g>
我会这样做的。由于这个问题: 如何向D3添加功能 所以我创建了一个函数来创建一个圆:
d3.selection.prototype.appendCircle = function(data, x,y,r,fill) {
return this
.data(data)
.enter()
.append('circle')
.attr('cx', x)
.attr('cy', y)
.attr('r', r)
.style('fill', fill);
}
上述函数具有参数、数据、x、y、半径和填充,因此您可以自定义所有属性
现在应用它:
var svg = d3.select('body').append('svg');
var circles = svg.selectAll('circle')
.appendCircle([1],100,100,15,'red')
现在,您已经创建了一个函数来创建您的形状:)您可以根据需要将其复杂化
这是我在其中弄得一团糟的地方:接受一个函数作为参数,它可以让您按照自己的意愿构建节点。您可以使用对象定义作为模板,根据需要创建节点
为了简化示例,假设您将复杂对象定义为
<script type='text/template' id='Titre_x5F_A11'>
<g>
<circle class="st23" cx="20" cy="20" r="10"/>
<circle class="st19" cx="50" cy="20" r="10"/>
<circle class="st21" cx="70" cy="20" r="10"/>
</g>
</script>
以及一个带有嵌入式SVG的演示
var data=[{id:1},{id:2},{id:3}];
var tpl=d3.select('#Titre_x5F_A11').html();
d3.选择(“svg”).selectAll(“complexObject”)
.数据(数据)
.输入()
.append(函数(){
var g=document.createElements(“http://www.w3.org/2000/svg“,“g”);
g、 innerHTML=tpl;
g、 setAttribute('classname','complexObject');
返回g;
})
.attr('transform',函数(d,i){
返回“translate(0)”+(i*40+)”;
});代码>
.st23{填充:红色}
.st19{填充:蓝色}
.st21{fill:green}
可能是相关的。通过将信息存储在SVG文件中并加载,您似乎可以实现类似的行为。了解这一点,您可以根据自己的意愿对其进行定制。获取“复杂”形状的属性并将其传递给以下对象:)回头看你的问题,这可能不是你想要的。但我认为定制D3功能的要点可能会派上用场,因此我将保留答案:)
// HTML to use as template
var tpl = d3.select('#Titre_x5F_A11').html();
// selection
svgContainer.selectAll(".complexObject")
.data(data)
.enter()
.append(function() {
//create a node
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
// fill with the HTML
g.innerHTML = tpl;
//set a class to be coherent with your selection
g.setAttribute('classname', 'complexObject');
return g;
})
// let's move the copies
.attr('transform', function(d, i) {
return "translate(0, " + (i * 40) + ")";
});