如何将2d数据输入d3并访问每个子数组的句柄以操纵其元素？

Question

说，我有2d arr = [[1,2,3],[100,200],['A','B'...'Z']] 。 如您所见， arr[0].length!=arr[1].length!=arr[2].length 。

我想将它们表示为svg中的文本标签。

此外，我想保持灵活性，例如每个子数组从（x，y）开始，以及子数组每个元素（x，y）之间的间隔有多宽。

d3.select('svg').selectAll('g').data(arr).enter().append('g').selectAll('text').data((d)=>d).enter().append('text').text(d=>d)

但是这样一来，我就失去了每克内的信息。 我尝试在.selectAll（'text'）之前设置.attr（'x'，（d，i）=>（i + 1）* 20），但是它只会将'x'-attr添加到g上并且没有效果在页面上显示的文本（即数组的元素）上。

问题是我将所有这些都放入了DOM中。 但是，如何像行一样，在一组中（没有硬编码）调整它们的.attr（'x'）、. attr（'y'），但是每行在元素之间可以有自己的间距？

Answer 1

您可以尝试使用“ getBBox”或getBoundingClientRect来获取节点宽度，然后进行水平布局。

 var arr = [[1,2,3],[100,200],['A','B', 'C', 'D', 'E', 'Z']] var container = d3.select("#box") .append("g") .attr("transform", "translate(10, 50)"); container .selectAll("text") .data(arr) .enter() .append("text") .text(d => d); /* Using "getBBox" or "getBoundingClientRect" method to get each text node's width, then move them one another. You must make sure the svg element and its parent elements are visible, which means "display: none" is should not applied on them. */ var xInit = 0, padding = 15; container .selectAll("text") .each(function (d, i) { d3.select(this).attr("x", xInit); xInit += this.getBBox().width + padding; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <svg id="box" width="500" height="300"></svg> 

Answer 2

我想我明白了。 不确定这是否是明确的解决方案，但它是否有效。 首先，在创建g s之后添加id。 然后根据id（即行）为x和y坐标编写函数。

function x(d,i,j){
  let node_id = j[0].parentNode.id; // allows to dynamically access the ids of every text element
  //calculate x_value here
  return x_value;
}

该功能可以传递到原始链中。

d3.select('svg').selectAll('g').data(arr).enter().append('g')
    .attr('id', (d,i)=>i) // adding ids to every g based on the array index
    .selectAll('text').data((d)=>d).enter().append('text').text(d=>d)
    .attr('x', x) // here

如果有人知道更精简的解决方案，那将不胜感激，因为我是Java和d3的新手。