小编run*_*ndy的帖子

在单个 Join 中追加多个元素

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

4
推荐指数
1
解决办法
1873
查看次数

标签 统计

d3.js ×1