Научитесь создавать визуализации данных D3.js на примере

Документ SVG для этого типа графики состоит из текста, линий и кругов.

 <svg id="chart" width="600" height="500"> <text class="time" x="300" y="50" text-anchor="middle">6:00</text> <text class="origin-text" x="90" y="75" text-anchor="end">MEL</text> <text class="dest-text" x="510" y="75" text-anchor="start">SYD</text> <circle class="origin-dot" r="5" cx="100" cy="75" /> <circle class="dest-dot" r="5" cx="500" cy="75" /> <line class="origin-dest-line" x1="110" y1="75" x2="490" y2="75" /> <!-- for each flight in the current time --> <g class="flight"> <text class="flight-id" x="160" y="100">JQ 500</text> <line class="flight-line" x1="100" y1="100" x2="150" y2="100" /> <circle class="flight-dot" cx="150" cy="100" r="5" /> </g> </svg> 

Динамические части — это время, элементы в летной группе, и данные могут выглядеть примерно так:

 let data = [ { departs: '06:00 am', arrives: '07:25 am', id: 'Jetstar 500' }, { departs: '06:00 am', arrives: '07:25 am', id: 'Qantas 400' }, { departs: '06:00 am', arrives: '07:25 am', id: 'Virgin 803' } ] 

Чтобы получить положение x для динамического времени, нам нужно создать шкалу времени для каждого рейса, которая отображает время его вылета и прибытия в положение x на нашем графике. Мы можем циклически перебирать наши данные, добавляя объекты и масштабы Date чтобы с ними было легче работать. Moment.js очень помогает здесь в разборе дат и манипуляциях.

 data.forEach((d)=> { d.departureDate = moment(d.departs, "hh-mm a").toDate(); d.arrivalDate = moment(d.arrives, "hh-mm a").toDate(); d.xScale = d3.time.scale() .domain([departureDate, arrivalDate]) .range([100, 500]) }); 

Теперь мы можем передать нашу изменяющуюся дату в xScale() чтобы получить координату x для каждого полета.

Render Loop

Время отправления и прибытия округляется до 5 минут, поэтому мы можем просматривать наши данные с шагом 5 м от первого отъезда до последнего прибытия.

 let now = moment(data[0].departs, "hh:mm a"); const end = moment(data[data.length - 1].arrives, "hh:mm a"); const loop = function() { const time = now.toDate(); // Filter data set to active flights in the current time const currentData = data.filter((d)=> { return d.departureDate <= time && time <= d.arrivalDate }); render(currentData, time); if (now <= end) { // Increment 5m and call loop again in 500ms now = now.add(5, 'minutes'); setTimeout(loop, 500); } } 

Вход, обновление и выход

D3 позволяет указывать преобразования и переходы элементов, когда:

• Новые точки данных приходят (Enter)
• Изменение существующих точек данных (обновление)
• Существующие точки данных удалены (Выход)

 const render = function(data, time) { // render the time d3.select('.time') .text(moment(time).format("hh:mm a")) // Make a d3 selection and apply our data set const flight = d3.select('#chart') .selectAll('g.flight') .data(data, (d)=> d.id) // Enter new nodes for any data point with an id not in the DOM const newFlight = flight.enter() .append("g") .attr('class', 'flight') const xPoint = (d)=> d.xScale(time); const yPoint = (d, i)=> 100 + i * 25; newFlight.append("circle") .attr('class',"flight-dot") .attr('cx', xPoint) .attr('cy', yPoint) .attr('r', "5") // Update existing nodes in selection with id's that are in the data flight.select('.flight-dot') .attr('cx', xPoint) .attr('cy', yPoint) // Exit old nodes in selection with id's that are not in the data const oldFlight = flight.exit() .remove() } 

Переходы

Код выше отображает кадр каждые 500 мс с шагом 5 минут:

• Обновляет время
• Создает новую группу полета с кругом для каждого полета
• Обновляет координаты х / у текущих рейсов
• Удаляет группы полета, когда они прибыли

Это работает, но мы действительно хотим плавного перехода между каждым из этих кадров. Мы можем достичь этого, создав переход для любого выбора D3 и предоставив функцию продолжительности и замедления перед настройкой атрибутов или свойств стиля.

Например, давайте исчезнем в непрозрачности ввода групп полета.

 const newFlight = flight.enter() .append("g") .attr('class', 'flight') .attr('opacity', 0) newFlight.transition() .duration(500) .attr('opacity', 1) 

Давайте исчезнем с выходом из летных групп.

 flight.exit() .transition() .duration(500) .attr('opacity', 0) .remove() 

Добавьте плавный переход между точками x и y.

 flight.select('.flight-dot') .transition() .duration(500) .ease('linear') .attr('cx', xPoint) .attr('cy', yPoint) 

Мы также можем перевести время между 5-минутными приращениями, чтобы оно отображалось каждую минуту, а не каждые пять минут, используя функцию tween .

 const inFiveMinutes = moment(time).add(5, 'minutes').toDate(); const i = d3.interpolate(time, inFiveMinutes); d3.select('.time') .transition() .duration(500) .ease('linear') .tween("text", ()=> { return function(t) { this.textContent = moment(i(t)).format("hh:mm a"); }; }); 

t — значение прогресса между 0 и 1 для перехода.

Будь креативным

В библиотеке есть гораздо больше, чем я мог бы осветить в этой статье, мне бы хотелось покопаться в некоторых из этих более мясных примеров, но вам нужно поставить лошадь перед повозкой, как они говорят.

• Полярные часы
• Force Layouts
• География и прогнозы
• Вороной Тесселяция
• Алгоритм Прима V
• OMG Particles II

Есть много других примеров в галерее D3 . Если вы хотите узнать больше, я очень рекомендую учебники Скотта Мюррея по D3, а также документацию по D3 , что отлично.

Надеемся, что этот обзор высокого уровня с несколькими практическими примерами дал вам представление о том, как работать с выборами, масштабами и переходами. Подумайте о лучших способах представления ваших данных и получайте удовольствие, создавая собственные уникальные визуализации данных. Напишите мне в комментариях и дайте мне знать, что вы создали с D3!