walkthrough.js 789 B

1234567891011121314151617181920212223242526272829303132
  1. const events = require('events');
  2. const d3 = require('../d3.js');
  3. class Walkthrough extends events.EventEmitter {
  4. constructor({ container }) {
  5. super();
  6. this._container = d3.select(container);
  7. this._steps = this._container.selectAll('.ar-walkthrough-step');
  8. this._pages = this._container.selectAll('.ar-walkthrough-page')
  9. .on('click', (d) => this.emit('click', d));
  10. const itemNumbers = this._steps.nodes()
  11. .map((element, index) => index + 1);
  12. this._pages.data(itemNumbers);
  13. this._steps.data(itemNumbers);
  14. this._selectedItem = 1;
  15. }
  16. select(itemNumber) {
  17. this._selectedItem = itemNumber;
  18. }
  19. draw() {
  20. this._steps
  21. .classed('ar-walkthrough-selected', (d) => d === this._selectedItem);
  22. }
  23. }
  24. module.exports = Walkthrough;