Javascript 如何根据数据点索引更改元素图形顺序？

我正在为我在d3.js数据可视化中使用的数据的每个数据点绘制几个元素。这将根据数据创建一个简单的项目列表。它的输出如下：

[数据点1的标题]

[SVG使用数据点1]
[数据点2的标题]

[SVG使用数据点2]
[数据点3的标题]

[SVG使用数据点3]
[数据点4的标题]

[SVG使用数据点4]
[数据点5的标题]

[SVG使用数据点5]

对大多数人来说，这正是他们想要的

然而，我试图实现的是能够更改绘图顺序，例如，每个偶数数据点都应该以SVG标记开始，以p标记结束。看起来是这样的：

[数据点1的标题]

[SVG使用数据点1]
[SVG使用数据点2]
[数据点2的标题]

[数据点3的标题]

[SVG使用数据点3]
[SVG使用数据点4]
[数据点4的标题]

[数据点5的标题]

[SVG使用数据点5]

请注意，数据点2和4的绘图顺序都已更改

---

有人能告诉我d3.js是否提供了一种实现这一点的方法，或者你能告诉我你将如何自己解决这个问题吗？

不幸的是，你没有共享你的代码，因此我们无法重构它

因此，我将使用

selection.each

编写一个答案，这可以说是您案例中惯用的D3解决方案。这里唯一重要的事情是将索引传递给余数运算符，如

i%2

，对于奇数索引返回

true

（

1

），对于偶数索引返回

false

（

0

）。然后，使用

if

，我们可以选择将附加哪些元素。例如：

.each(function(_, i) {
    if (i % 2) {
        appendSvg(d3.select(this))
        appendParagraph(d3.select(this))
    } else {
        appendParagraph(d3.select(this))
        appendSvg(d3.select(this))
    }
});

在本例中，我使用了两个不同的函数，我将当前选择传递给它们，但是您可以简单地使用您拥有的块（尽管代码重复性更高）

以下是演示：

const body=d3.选择（“body”）；
const divs=body.selectAll（空）
.数据（d3.范围（5））
.输入（）
.附加（“div”）
.每项（功能）{
如果（i%2）{
附录SVG（d3.选择（此））
附录段落（d3.选择（本））
}否则{
附录段落（d3.选择（本））
附录SVG（d3.选择（此））
}
});
函数（sel）{
sel.append（“svg”）
.attr（“宽度”，80）
.attr（“高度”，20）；
};
功能段（sel）{
选择附加（“p”）
.html（“这是一个p元素”）
};
div{
显示：内联块；
右边距：10px；
边框：1px纯色灰色；
填充：2px；
}
svg{
背景颜色：棕褐色；
}
p{
字体大小：12px；
利润底部：4倍；
}
很遗憾，您没有共享代码，因此我们无法对其进行重构

因此，我将使用
selection.each
编写一个答案，这可以说是您案例中惯用的D3解决方案。这里唯一重要的事情是将索引传递给余数运算符，如
i%2
，对于奇数索引返回
true
（
1
），对于偶数索引返回
false
（
0
）。然后，使用
if
，我们可以选择将附加哪些元素。例如：

.each(function(_, i) {
    if (i % 2) {
        appendSvg(d3.select(this))
        appendParagraph(d3.select(this))
    } else {
        appendParagraph(d3.select(this))
        appendSvg(d3.select(this))
    }
});

在本例中，我使用了两个不同的函数，我将当前选择传递给它们，但是您可以简单地使用您拥有的块（尽管代码重复性更高）

以下是演示：


const body=d3.选择（“body”）；
const divs=body.selectAll（空）
.数据（d3.范围（5））
.输入（）
.附加（“div”）
.每项（功能）{
如果（i%2）{
附录SVG（d3.选择（此））
附录段落（d3.选择（本））
}否则{
附录段落（d3.选择（本））
附录SVG（d3.选择（此））
}
});
函数（sel）{
sel.append（“svg”）
.attr（“宽度”，80）
.attr（“高度”，20）；
};
功能段（sel）{
选择附加（“p”）
.html（“这是一个p元素”）
};
div{
显示：内联块；
右边距：10px；
边框：1px纯色灰色；
填充：2px；
}
svg{
背景颜色：棕褐色；
}
p{
字体大小：12px；
利润底部：4倍；
}