enter我正在尝试使用 d3v5 在单个连接的函数中附加多个元素。
使用时将多个元素附加到单个组的正确方法是什么selection.join()?
我尝试创建的 DOM 结构如下所示:
<svg id="chart">
<g class="data-group">
<rect class="data-rect" x="5" y="5" width="10" height="10" style="fill: red;"></rect>
<text class="data-text" x="15" y="20">data1</text>
</g>
<g class="data-group">
<rect class="data-rect" x="25" y="25" width="10" height="10" style="fill: green;"></rect>
<text class="data-text" x="35" y="40">data2</text>
</g>
<g class="data-group">
<rect class="data-rect" x="50" y="50" width="10" height="10" style="fill: gray;"></rect>
<text class="data-text" x="60" y="65">data3</text>
</g>
</svg>
Run Code Online (Sandbox Code Playgroud)
我可以通过循环数据 小提琴轻松手动生成此结构
for(var i = 0; i < data.length; i++){
let o = data[i];
let g = d3.select('#chart')
.append('g')
.datum(o) …Run Code Online (Sandbox Code Playgroud) d3.js ×1