javascript-如何将两个d3对象合并为一个以进行批量操作

我正在使用d3.js创建一些静态SVG元素,它们共享许多属性.

var c1 = svg.append('circle').attr('r',20);
var c2 = svg.append('circle').attr('r',40);
...

我想将它们组合在一起以设置其他属性.我以为我可以使用推,即

var circles = svg.append('circle').attr('r',20);
circles.push( svg.append('circle').attr('r',40));
...
circles.attr('stroke','black').attr('stroke-width',2);

但是出现错误(“ this.setAttribute不是函数”)

d3都是关于套东西的,它是all about arrays,所以我认为这项工作可行吗？有办法吗？

(我知道我可以进行数据连接,但我想知道一种更通用的情况,一次可以处理几件事)

解决方法:

如果要以这种方式进行操作,则需要知道d3.selection与Array有何不同.

Mike Bostock很好地解释了主题HERE.

这是重要的位：

You were probably told that selections are arrays of DOM elements. False. For one, selections are a subclass of array; this subclass provides methods to manipulate selected elements, such as setting attributes and styles.

…

Another reason selections aren’t literally arrays of elements is that they are arrays of arrays of elements: a selection is an array of groups, and each group is an array of elements.

因此,事实证明您想要.push到的Array实际上嵌套在表示选择的Array子类中.如果您的选择存储在可变圆中,则可以将实际的元素数组作为circle [0]访问.

另一个需要注意的重要事项：内部Array保存实际的DOM元素引用,而不是对其的选择.要从包含单个元素的选择中获取元素引用,只需在选择上调用.node()即可.

您可以从创建一个空选择开始：

var circles = d3.selectAll('.empty');

假设您的页面上没有分类为“空”的东西,这是一种很好的语义方式.

然后,可以将直接添加到circle [0]中的每个圆选择的.node推入.

circles[0].push(svg.append('circle').attr('r',40).node());

进行多次,然后可以通过在圈子上调用标准选择方法来设置所有圈子的样式/属性：

circles
  .attr('stroke', 'black')
  .attr('stroke-width', 2)

HERE是一个演示.

标签：svg,d3-js,javascript
来源： https://codeday.me/bug/20191121/2049420.html