Добавление функции масштабирования в многоразовые диаграммы D3 с использованием классов ES6 - PullRequest
Новая
       8

Добавление функции масштабирования в многоразовые диаграммы D3 с использованием классов ES6

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

Я переключаю диаграмму D3 v5 многократного использования, чтобы использовать классы ES6, и у меня возникают проблемы с реализацией функций, которые обновляют переменные, такие как функция масштабирования.Пока у меня есть рабочая карта: 

class myMap{
  constructor(args = {}){

    this.data = args.data;
    this.topo = args.topo;
    this.element =document.querySelector(args.element);
    this.width =args.width || this.element.offsetWidth;
    this.height = args.height || this.width / 2;


    this.setup();
 }

setup(){
this.projection = d3.geoMercator()
                         .translate([(this.width/2), (this.height/2)])
                         .scale( this.width / 2 / Math.PI);

this.path = d3.geoPath().projection(this.projection);

   // zoom fuction inserted here
  this.element.innerHTML ='';
    this.svg =d3.select(this.element).append("svg")
                 .attr("width", this.width)
                 .attr("height", this.height)
                 //.call(zoom)
                 .append("g");

  this.plot = this.svg.append("g");  
   d3.json(this.topo).then( world => {

    var topo = topojson.feature(world, world.objects.countries).features;

    this.draw(topo);
    });

   }


draw(topo){

var country = this.plot.selectAll(".country")
                 .data(topo);

  country.enter().insert("path")
      .attr("class", "country")
      .attr("d", this.path)
      .attr('id', 'countries')
      .attr("fill", #cde)
      .attr("class", "feature");

  }
 //move(){} goes here  

}

, которая вызывается с использованием: 

const chart = new myMap({
  element: '#map',
    data: DATA_IN_JSON,
    topo:"../../../LINK_to_topojsonfile"});

При использовании функций я добавлял масштабирование с помощью переменной и вызывая функцию перемещения с помощью .call(zoom) добавлено в SVG: 

var zoom = d3.zoom()
    .scaleExtent([1, 9])
    .on("zoom", move);

function move() {
  g.style("stroke-width", 1.5 / d3.event.transform.k + "px");
  g.attr("transform", d3.event.transform);
}

Используя классы, я попытался объявить масштабирование в части setup() класса и вызвать форму перемещения .on("zoom", this.move) и присоединить функцию call к SVG какотмечено в комментариях выше.но я получаю Uncaught TypeError: Cannot read property 'style' of undefined at SVGSVGElement.move в функции перемещения при ссылке this.plot

const zoom = d3.zoom()
               .scaleExtent([1, 9])
               .on("zoom", this.move);

 move() {
   this.plot
       .style("stroke-width", 1.5 / d3.event.transform.k + "px");
   this.plot
       .attr("transform", d3.event.transform);
 }

1 Ответ

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

вам необходимо связать this

const zoom = d3.zoom()
    .scaleExtent([1, 9])
    .on("zoom", this.move.bind(this));

console.log this внутри move()

...