d3 без .enter ()
как сделать такой же график и вручную присоединить к вашему массиву данных
В первом учебнике по d3, который прочитают люди, они передадут массив в .data () после selectAll- создание группы элементов DOM, которые еще не существуют.
из руководства по началу работы я использовал
Поскольку мы знаем, что выбор пуст, возвращенные выборки обновления и выхода также пусты, и нам нужно только обработать выбор входа, который представляет новые данные, для которых не было существующего элемента. Мы создаем экземпляры этих недостающих элементов, добавляя их к выбору ввода.
О том, как это все работает под капотом, написаны статьи.
Новичку сложно понять эти концепции. Я также считаю, что в некоторых ситуациях этот паттерн является помехой. Если вы считаете, что эта модель является препятствием для начала работы, или если вы просто предпочитаете не использовать ее в своих программах d3, вы можете легко ее проигнорировать.
"пример"
// our data array
var data = [3, 4, 1, 9, 2]
// boilerplate setup code for our containers and scales
var body = d3.select('body')
var color_scale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([100, 255])
// parent containers for our example
var example1 = body.append('div').attr('id', 'container')
var example2 = body.append('div').attr('id', 'container')
// creating the elements using .data().enter()
example1.selectAll('div.foo')
.data(data)
.enter()
.append('div')
.attr('class', 'foo')
.style('background-color', 'white')
.html(function(d) {
return d;
})
// performing the same transition on all elements
d3.selectAll('div.foo')
.transition()
.duration(2000)
.style('background-color', function(d) {
var v = color_scale(d)
return d3.rgb(v, v, v)
})
// creating the elements without using .enter()
var divs = [] // this is where we will save our elements
// iterate over each element in the array
data.forEach(function(d) {
var div = example2.append('div')
.datum(d)
.html(d)
.style('background-color', 'white')
// push the created object to an array
divs.push(div)
})
// perform the same transition on each element
divs.forEach(function(div) {
div.transition()
.duration(2000)
.style('background-color', function(d) {
var v = color_scale(d)
return d3.rgb(v, v, v)
})
})
зачем это делать?
Я предпочитаю, когда я закончу настройку своего графика, иметь итеративный массив объектов javascript, которые я могу перемещать или удалять по отдельности. Я обнаружил, что кэширование селекторов отдельных элементов в массиве - это работоспособная модель для масштабирования приложений, которые не полагаются на запросы к DOM по типу элемента, классу или идентификатору.
Есть много причин использовать шаблон .data (). Enter (), но если вам это неудобно, вы можете сделать это вручную.
