Question

如果我有像这样的嵌套数组

interface DBRecord<Data> extends Data {
  id: number;
  dateCreated: Date
  dateModified: Date
}

我想创建两个svg元素，这很容易

var ar = [[[1,0],[2,0],[3,0]], [[1,0],[2,0],[3,0]]]

现在我想将子数组绑定到svg选择，就像这样

var svg = d3.select('div.main`)
  .selectAll('svg')
  .data(ar)
  .enter()
  .append('svg')

之后附加到var g = svg.selectAll('g') .data(function(d,i) {return d[i];}) .enter() .append('g')的数据应为

我知道这条线是不正确的[[1,0],[2,0],[3,0]]只是不知道如何以不同的方式解释它。

Answer 1

如果我正确理解了这个问题，

您是对的，问题来自已确定的行。您无需返回d[i]作为新选择的数据，d表示与每个svg相关联的每个单独的数据，d[i]仅代表每个{1}}的一部分基准。

如果您希望每个数据完全按照正常情况附加g：

var g = svg.append("g");

在console.log上尝试g.data()，您会发现您的数据仍然存在，并且每个g都绑定了数据。

然后，您可以使用绑定到每个g并从每个svg继承的每个基准作为数据来创建新功能。传递数据如下：.data(function(d) { return d; })。下面的代码段应该有助于将它们放在一起：

var data = [[[10,10],[30,30],[50,50]], [[10,20],[80,30],[50,60]] ];

var svg = d3.select('body')
  .selectAll('svg')
  .data(data)
  .enter()
  .append('svg')
  .attr("height",100)
  .attr("width",200);
  
var g = svg.append("g");

console.log("Data Bound To First G in First SVG:")
console.log(g.data()[0]);
console.log("Data Bound To Second G in Second SVG:")
console.log(g.data()[1]);

// Data is now available to make features:  
g.selectAll("circle")
  .data(function(d) { return d; })
  .enter()
  .append("circle")
  .attr("r",10)
  .attr("cx",function(d) { return d[0] })
  .attr("cy",function(d) { return d[1] });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

如何将数据的子选择传递给子节点？

1 个答案: