如何根据datapoint索引更改元素绘图顺序？

Question

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

<div>
  <p>[Title of datapoint 1]</p>
  <svg>[SVG using datapoint 1]</svg>
</div>
<div>
  <p>[Title of datapoint 2]</p>
  <svg>[SVG using datapoint 2]</svg>
</div>
<div>
  <p>[Title of datapoint 3]</p>
  <svg>[SVG using datapoint 3]</svg>
</div>
<div>
  <p>[Title of datapoint 4]</p>
  <svg>[SVG using datapoint 4]</svg>
</div>
<div>
  <p>[Title of datapoint 5]</p>
  <svg>[SVG using datapoint 5]</svg>
</div>

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

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

<div>
  <p>[Title of datapoint 1]</p>
  <svg>[SVG using datapoint 1]</svg>
</div>
<div>
  <svg>[SVG using datapoint 2]</svg>
  <p>[Title of datapoint 2]</p>
</div>
<div>
  <p>[Title of datapoint 3]</p>
  <svg>[SVG using datapoint 3]</svg>
</div>
<div>
  <svg>[SVG using datapoint 4]</svg>
  <p>[Title of datapoint 4]</p>
</div>
<div>
  <p>[Title of datapoint 5]</p>
  <svg>[SVG using datapoint 5]</svg>
</div>

请注意，对于数据池2和4，绘图顺序都发生了变化。

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

Answer 1

不幸的是，您没有共享代码，所以我们不能重构它。

因此，我将使用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.select("body");

const divs = body.selectAll(null)
  .data(d3.range(5))
  .enter()
  .append("div")
  .each(function(_, i) {
    if (i % 2) {
      appendSvg(d3.select(this))
      appendParagraph(d3.select(this))
    } else {
      appendParagraph(d3.select(this))
      appendSvg(d3.select(this))
    }
  });

function appendSvg(sel) {
  sel.append("svg")
    .attr("width", 80)
    .attr("height", 20);
};

function appendParagraph(sel) {
  sel.append("p")
    .html("This is a p element")
};

div {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid gray;
  padding: 2px;
}

svg {
  background-color: tan;
}

p {
  font-size: 12px;
  margin-bottom: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

​