Javascript SVG平移组在窗口上的定位使用d3调整大小

在使用d3 enter，update模式时，我看到一些奇怪的转换行为。我创建了一组（svg:g）文本（svg:text）项。当我最初使用

.enter.append（'g'）.attr（'transform'，function（d）{…translate…}

创建组时，这些项是相对于SVG的顶部的。但是，当我在调整窗口大小后更新组时，这些组是相对于它们最外层的容器的

我的数据是一组嵌套的对象（d3.nest）

我的输入/更新模式是：

// EDIT Some JS to add shapes first
var shapeCont = d3.select('#shapesAtTheTop');
var shapes = shapeCont.selectAll('rect')
  .data([50,50]);
shapes.exit().remove();
shapes.enter().append('rect')
  .attr('width',function(d){return window.innerWidth*(d/100)})
  .attr('x', function(d,i){return i*window.innerWidth*(d/100)})
  .attr('y',0)
  .attr('height',95);
// END EDIT
// Now add the text
var textgroupLeft = window.width/50, textGrouptop = 100;
function translateGroup(datum, i){
  var x = textGroupLeft * i;
  var y = textGroupTop;
  return 'translate('+x+' '+y+')';
}
var textContainer = d3.select('g.textContainer');
var txtg = textContainer.selectAll('g').data(myData,function(d){return d.key;});
// UPDATE
txtg.attr('transform',translateGroup);
// REMOVE
txtg.exit().remove();
// NEW
txtg.enter().append('g')
  .classed('textGroup',true')
  .attr('transform',transelateGroup)

var txt = d3.selectAll('g.textGroup').selectAll('text')
  .data(function(d){retrun d.values;},
    function(dataum){return JSON.stringify(dataum);})
// REMOVE
.....
// UPDATE
.....
// NEW
.....

我的HTML/SVG是：

<svg>
  <g id="shapesAtTop">
  ..... add polygons with positions in the first 100px high ....
  </g>
  <g id="textBelow" class="textContainer">
  </g>
</svg>

..添加位置在前100像素高的多边形。。。。

---

是切换坐标系吗？如果是，原因是什么？

很难看出哪里出了问题。您可以通过在SVG中的#textbower组上以HTML或编程方式使用D3明确定义翻译来解决此问题。一旦该组具有正确的垂直位置，就可以更容易地翻译任何嵌套对象

确定要应用的转换的代码很难理解。我建议使用d3来处理从要转换的对象的索引到像素值的映射

下面的代码段使用D3 v4演示了这两种方法。如果您需要使用早期版本的D3，则刻度的名称不同，您必须更加小心地进行选择。由于未获得selection.merge（）方法，请输入（）

var data=[{key:'a'}，{key:'b'}]
变量宽度=500//px
更新（数据、宽度）
setTimeout（函数（）{update（data，200）}，2000）
功能更新（数据、宽度）{
//创建标注栏比例以辅助布局
var标度=d3
.scaleBand（）
.域（d3.范围（数据.长度））
.范围（[0，宽度]）
//总宽度填充比
.填充（0.1）；
//附加/修改形状
var shapeCont=d3。选择（“shapesAtTop”）；
var shapes=shapeCont.selectAll（“rect”）.data（数据）；
//删除所有未使用的节点
shapes.exit（）.remove（）；
//进入
shapes.enter（）
//添加新矩形
.append（“rect”）
//将所选内容与任何现有节点合并
.合并（形状）
//设置所有rect属性
.attr（“x”，函数（d，i）{
回报率（i）；
})
.attr（“y”，0）
.attr（“高度”，95）
.attr（“宽度”，scale.bandwidth（））；
//追加/修改文本组元素
var textContainer=d3。选择（“#textbowner”）；
var txtg=textContainer.selectAll（'g'）
.数据（数据、功能（d）{
返回d？d.key:this.id
});
//删除所有未使用的节点
txtg.exit（）.remove（）
//进入
txtg.enter（）
.append（'g'）
.classed（'textGroup'，true）
//向新元素添加一些文本
.call（函数（g）{g.append（'text'）.text（'I am text'）}）
//合并现有和新
.merge（txtg）
.attr（'transform'，函数（d，i）{
返回“translate”（'+scale（i）+'）”
})
}

svg{
宽度：100%；
高度：500px；
}

var textgroupLeft=window.width/50：您是否在某个地方定义了window.width，或者您是否需要window.innerWidth？您发布的代码中也有一些键入错误，使用retrun和translateGroup而不是return和translateGroup，尽管对于要运行的代码，我认为它们不在实际代码中。很抱歉，我必须重新键入在一个单独的工作站上。Window.innerwidth就是我的意思。将转换添加到最外层的

g

似乎可行，但为什么这是必要的？在思考了很久之后。在我看来，当页面加载“shapesAtTop”时，有一个0x0（H&W）维度，使页面基于该0x0流动。然后，当调整大小时，shapesAtTop具有非零高度，从而将组向下推。

<svg>
  <g id="shapesAtTop">
  ..... add polygons with positions in the first 100px high ....
  </g>
  <g id="textBelow" class="textContainer">
  </g>
</svg>