将复杂的 SVG 元素追加到选区
Appending complex SVG elements to a selection
我有一个交互式模式项目,其中包含一些复杂的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 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>
和我的目标:
var complexObject = ... description of complexObject
var circles = svgContainer.selectAll("complexObject")
.data(data)
.enter()
.append("complexObject");
selection.append
接受一个函数作为参数,让你可以根据需要构建节点。您可以根据需要使用对象定义作为模板来创建节点。
为了简化示例,假设您将复杂对象定义为
<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>
这可能是您加载的外部文件,派生自 Handlebars 等模板引擎。
然后,您可以将enter
序列定义为
// 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) + ")";
});
以及带有嵌入式 SVG 的演示
var data = [{id: 1}, {id: 2}, {id: 3}];
var tpl = d3.select('#Titre_x5F_A11').html();
d3.select('svg').selectAll(".complexObject")
.data(data)
.enter()
.append(function() {
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.innerHTML = tpl;
g.setAttribute('classname', 'complexObject');
return g;
})
.attr('transform', function(d, i) {
return "translate(0, " + (i * 40) + ")";
});
.st23 {fill: red}
.st19 {fill: blue}
.st21 {fill: green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<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 width='400' height='400'>
</svg>
或者使用加载的文件(漂亮的老虎1),SVG 被克隆并附加到元素中
var data = [{id: 1}, {id: 2}, {id: 3}];
d3.xml('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg', "image/svg+xml", function(error, xml) {
if (error) throw error;
d3.select('svg').selectAll(".complexObject")
.data(data)
.enter()
.append(function() {
var importedNode = document.importNode(xml.documentElement, true);
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.appendChild(importedNode);
g.setAttribute('classname', 'complexObject');
return g;
})
.attr('transform', function(d, i) {
return "translate(0, " + (i * 100) + "), scale(0.2)";
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width='400' height='400'>
</svg>
为了好玩,一个关于可观察的版本
1 作者:Ghostscript 作者 (GPL Ghostscript SVN: tiger.eps) [GPL (http://www.gnu.org/licenses/gpl.html)],通过维基共享资源
这就是我会这样做的方式。多亏了这个问题:如何使用 d3 将圆圈带到前面?
如何向 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')
好了,你刚刚创建了一个函数来创建你的形状:)您可以根据需要使其尽可能复杂。
这是我搞砸的小提琴: https://jsfiddle.net/thatoneguy/4x3rrd27/1/
相关文章:
- 表追加而不附加最后一个元素
- 如何在jquery中停止在更改时追加值
- JQuery.on(“keydown”)追加到页面时不工作
- jQuery[button.class]未检测到用按钮追加行
- 使用jQuery'生成输入字段;s追加
- js”;在“;不按特定顺序追加键/值
- 如何在 ReactJs 中追加到表
- 文本框仅接受十进制值,并且应在十进制后追加2个零
- 为什么DocumentFragment在追加后被清除
- 正在从JQuery追加Laravel Blade
- 有什么方法可以在下一个元素上进行追加吗
- jQuery-根据值在输入字段后追加图像
- jQuery动态使用.append()添加输入,但发布表单不是追加数据
- 追加Jquery后的Binding Click事件不起作用
- 包含数组的对象的QML ListModel追加中断
- JQuery追加到父级,只要它's已创建
- 一个接一个地追加两次
- 如何仅在数组没有的情况下追加到数组't包含带有rethinkDB的值
- Jasmine-无法将元素追加到DOM
- 将复杂的 SVG 元素追加到选区