Question

我对d3很新，并努力找到我遇到的特定问题的答案。以下是相关代码......

circles = base.selectAll("circle");

circles.attr("cx", function (d, i) {
            return +d3.select(this).attr("cx") + 2;
        })

circles.attr("cy", function (d, i) {
            return +d3.select(this).attr("cy") + 2;
        })

其中base.selectAll（＆＃34; circle＆＃34;）选择之前使用d3在不同函数中生成的所有svg圈。

上面的工作正如我想要的那样，我的问题是如何替换（this）.attr（）并替换是通过选择索引？例如，如果我想在函数中选择此前的圆，则类似于下面的内容，但这显然不起作用。

+d3.select(d[i-1]).attr("cy")

基本上我想在函数中循环并将（this）.attr（＆＃34; cy＆＃34;）与所有其他选定位置进行比较。我的代码到目前为止

circles = base.selectAll("circle");

circles.attr("cx", function (d, i) {
    for (n = 0; n < circles.size(); n++) {
        if (n != i) {

            if (+d3.select(this).attr("cy") + +d3.select(this).attr("r") > +d3.select(d[n]).attr("cy") + +d3.select(d[n]).attr("r")) {
                 //do something
            }

        }
    }
})

其中+ d3.select（d [n]）不对。任何帮助都将非常感激，或者只是指向正确的方向，无论我如何谷歌这个问题，我只是得到d3.select如何与其他元素一起工作的页面。

Answer 1

第二个和第三个参数合并

我认为comments中的@altocumulus是正确的，因为它可能是XY problem。

但是，我想写一个答案（对于未来的用户）因为这已被问过很多次，不同的风格：

在选择内容中，如何选择下一个元素？我怎样才能选择两个元素？如何选择五个要素？

您可以通过在匿名函数中组合第二个和第三个参数来完成此操作：

.attr("foo", function(d, i, n){
//second and third ------^--^

以下是重要信息：this，当前元素与n[i]相同。

因此，由于n[i]是this（即当前元素），因此您可以简单地使用不同的索引来获取不同的元素。例如：

n[i-1]→获取上一个元素
n[i+1]→获取下一个元素
n[i+4]→提前4个位置

......等等。

演示

这是一个非常简单的演示。在演示中，我将每个圆移动到下一个圆的位置，使用以下公式计算：

.attr("cx", function(d, i, n) {
    return +d3.select(n[i + 1]).attr("cx")
})

当然，您已经为最后一个元素设置了一个特殊规则，因为此时没有n[i+1]（检查三元运算符）。

以下是演示：

var data = [140, 200, 30, 70, 270, 100, 220, 80];
var svg = d3.select("svg");
var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", function(d, i) {
    return 12 + 25 * i;
  })
  .attr("cx", function(d) {
    return d;
  })
  .attr("r", 10)
  .attr("fill", "tan")
  .attr("stroke", "dimgray")
  .transition()
  .duration(1000)
  .delay(function(d, i) {
    return 1000 + i * 1000
  })
  .attr("cx", function(d, i, n) {
    return n[i + 1] ? +d3.select(n[i + 1]).attr("cx") : +d3.select(n[i]).attr("cx")
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="300" height="200"></svg>

在d3选择中按索引选择

1 个答案:

第二个和第三个参数合并

演示