D3 с пользовательским элементом: TypeError: t is null

Question

D3 с пользовательским элементом: TypeError: t is null

1

Я пытаюсь использовать 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 Спасибо заранее!

jaredsk 05 июнь 2017, в 07:37

Источник

Теги:

javascript

d3.js

html5-canvas

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2017-06-05T04-17-00.000Z

Независимо от того, что вы пытаетесь сделать (что я действительно не делаю), для этого введите выбор для работы, вы должны использовать 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 выбор - это объекты, а не массивы.