Question

我试图将D3 v.4与canvas元素一起使用（遵循引入的模式here）。我想将我的数据绑定到一个自定义元素，以便它可以在内存中访问，但不像svg一样呈现给页面。但是，下面的代码抛出：TypeError: t is null。我无法在错误上获得良好的堆栈跟踪。

const data = [{a:1,b:2},{a:2,b:4}]; 

const dataContainer = document.createElement('custom');
const container = d3.select(dataContainer)
      .data(data).enter()
      .append('custom')
      .attr('class','element')
      .attr('test-data-attribute', (d) => { return d; });

const nodes = container.selectAll('.element');
console.log(nodes.length);

此处的Codepen演示：https://codepen.io/jaredsk/pen/OgPMpL?editors=0010提前致谢！

Answer 1

无论你想做什么（我没有真正关注），为了让选择工作，你必须使用selectAll：

const data = [{
    a: 1,
    b: 2
}, {
    a: 2,
    b: 4
}];

const dataContainer = document.createElement('custom');
const container = d3.select(dataContainer)
    .selectAll(null)// <---- selectAll here
    .data(data).enter()
    .append('custom')
    .attr('class', 'element')
    .attr('test-data-attribute', (d) => {
        return d;
    });

const nodes = container.selectAll('.element');
console.log(nodes);

以下是更新的CodePen：https://codepen.io/anon/pen/gRbPjb?editors=0110

PS：我删除了length中的console.log(nodes.length)，因为在D3 v4.x中，选项是对象，而不再是数组。

带有自定义元素的D3：TypeError：t为null

1 个答案: