Как импортировать модуль d3.js v5 в полимерный элемент 3? - PullRequest
Новая
       9

Как импортировать модуль d3.js v5 в полимерный элемент 3?

0 голосов
/ 02 октября 2018

Ранее я создавал пользовательские элементы из полимера 1.x, используя d3 v3.Я хочу обновить их до полимера 3 и d3 v5.

Вот базовый полимерный элемент 3, в который я хочу включить d3 v5: 

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

/**
 * `foo-bar`
 * 
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class FooBar extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <h2>Hello [[prop1]]!</h2>
    `;
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'foo-bar',
      },
    };
  }
  constructor() {
    super();
  }

  ready() {
    super.ready();
    console.log('foo-bar is ready!');
  }

}

window.customElements.define('foo-bar', FooBar);

Я звоню npm install d3

Как мне импортировать d3 в этот PolymerElement?У меня есть два разных типа полимерных элементов, использующих d3.Я сделал полимерные элементы как силовые, так и иерархические.

Я полагаю, что мне нужно что-то сделать в конструкторе () или ready () внутри полимераэлемент для использования библиотеки d3.

Я пробовал следующий импорт: 

import 'd3/dist/d3.js';

1 Ответ

0 голосов
/ 03 октября 2018

Поскольку d3 поставляется с модулями ES.Таким образом, вы можете импортировать как хотите. 

import { select, scaleOrdinal } from 'd3'
// or
import * as d3 from 'd3'

Тогда вы можете использовать d3 как обычно.

Пример:

index.html

<foo-bar></foo-bar>
<script type='module' src='app.js'></script>

app.js 

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'
import * as d3 from 'd3'

class FooBar extends PolymerElement {
  static get template () {
    return html`
      <style>
        .links line {
          stroke: #999;
          stroke-opacity: 0.6;
        }

        .nodes circle {
          stroke: #fff;
          stroke-width: 1.5px;
        }
      </style>

      <svg width='960' height='600'></svg>
    `
  }

  ready () {
    super.ready()
    this.initGraph()
  }

  initGraph () {
    let svg = d3.select(this.shadowRoot.querySelector('svg'))
    let width = +svg.attr('width')
    let height = +svg.attr('height')

    let color = d3.scaleOrdinal(d3.schemeCategory10)

    let simulation = d3.forceSimulation()
      .force('link', d3.forceLink().id(d => d.id))
      .force('charge', d3.forceManyBody())
      .force('center', d3.forceCenter(width / 2, height / 2))

    d3.json('miserables.json').then(graph => {
      let link = svg.append('g')
        .attr('class', 'links')
        .selectAll('line')
        .data(graph.links)
        .enter().append('line')
        .attr('stroke-width', d => Math.sqrt(d.value))

      let node = svg.append('g')
        .attr('class', 'nodes')
        .selectAll('circle')
        .data(graph.nodes)
        .enter().append('circle')
        .attr('r', 5)
        .attr('fill', d => color(d.group))
        .call(d3.drag()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended))

      node.append('title').text(d => d.id)

      simulation.nodes(graph.nodes)
        .on('tick', () => {
          link
            .attr('x1', d => d.source.x)
            .attr('y1', d => d.source.y)
            .attr('x2', d => d.target.x)
            .attr('y2', d => d.target.y)
          node
            .attr('cx', d => d.x)
            .attr('cy', d => d.y)
        })

      simulation.force('link').links(graph.links)
    })

    function dragstarted (d) {
      if (!d3.event.active) simulation.alphaTarget(0.3).restart()
      d.fx = d.x
      d.fy = d.y
    }

    function dragged (d) {
      d.fx = d3.event.x
      d.fy = d3.event.y
    }

    function dragended (d) {
      if (!d3.event.active) simulation.alphaTarget(0)
      d.fx = null
      d.fy = null
    }
  }
}

customElements.define('foo-bar', FooBar)

Примечание. Полимер использует Shadow DOM, через который не может пройти обычный селектор (например, d3.select).

В этом примере Iизменить с график направленной силы .

...