使用 D3js 数据绑定附加嵌套的 svg 元素？答案

【问题标题】：Appending nested svg elements with D3js data binding?使用 D3js 数据绑定附加嵌套的 svg 元素？
【发布时间】：2015-09-04 15:40:11
【问题描述】：

我正在尝试使用 D3js 数据绑定，将矩形附加为转换后的 svg 元素的子元素。我的矩形实际上被附加了，但它们被附加到 html 元素（我的意思是 html 文档的根元素），而不是作为 g 元素的子元素，我认为这将是它们的父节点。如何将它们附加为 g 元素的子节点？

//var svgTranslate = (sgv:g with some transform applied)

var myclassSelection = svgTranslate.select('rect.myclass');
var myclassBinding = myclassSelection.data(data);
var myclassBindingEnter = myclassBinding.enter();

myclassBindingEnter
.append('rect')
    .attr('class','myclass')
    .attr('x', function(d) { return d[0]; })
    .attr('y', 0)
    .attr('width', function(d) { return d[1]; })
    .attr('height', 25)
;

【问题讨论】：

您能否发布您的代码，展示您如何创建 svgTranslate 对象？
你需要.selectAll() 而不是.select()。
谢谢。 .selectAll() 解决了它。

标签： d3.js svg data-binding append

【解决方案1】：

正如 Lars Kotthoff 在 cmets 中回复的那样，我必须使用 .selectAll() 而不是 .select()

【讨论】：