Я пытаюсь использовать D3 v.4 с элементом canvas (следуя приведенному здесь шаблону). Я хочу привязать свои данные к пользовательскому элементу, так что он доступен в памяти, но не отображается на странице, как 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 Спасибо заранее!
Независимо от того, что вы пытаетесь сделать (что я действительно не делаю), для этого введите выбор для работы, вы должны использовать 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 выбор - это объекты, а не массивы.