Изменение взаимодействия с D3 v3 на v4 - PullRequest
Новая
       19

Изменение взаимодействия с D3 v3 на v4

2 голосов
/ 09 июня 2019

Я потратил больше 5 часов на замену этой круговой диаграммы на D3 v4, но она все равно не работает (то есть взаимодействия не выполняются).

Вот где они установлены: 

paths.enter()
    .append('svg:path')
    .attr('d', arc)
    .style('fill', function(d, i) {
        return color(i);
    })
    .style('stroke', '#FFFFFF')
    .on(eventObj)

1 Ответ

2 голосов
/ 11 июня 2019

Как вы можете видеть, в этом примере D3 v3 selection.on ... 

paths.on(eventObj)

... получает объект со всеми слушателями типа: 

var eventObj = {
    'mouseover': function(d, i, j) {
        //etc...
    },
    'mouseout': function(d, i, j) {
        //etc...
    },
    'click': function(d, i, j) {
        //etc...
    }
};

И здесь кроется проблема: это работает в D3 v3, но не в v4.

Посмотрите на эту демонстрацию, используя D3 v3 (наведите курсор на круг): 

const events = {
  "mouseover": function() {
    console.log("mouseover")
  },
  "mouseout": function() {
    console.log("mouseout")
  }
};

d3.select("circle").on(events)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<svg>
  <circle cx="100" cy="50" r="25"></circle>
</svg>

Теперь точно такой же код, но с использованием D3 v4: 

const events = {
  "mouseover": function() {
    console.log("mouseover")
  },
  "mouseout": function() {
    console.log("mouseout")
  }
};

d3.select("circle").on(events)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg>
  <circle cx="100" cy="50" r="25"></circle>
</svg>

Не работает.Он не выдает никакой ошибки, он просто молча терпит неудачу.

Решение : установите каждого слушателя событий отдельно: 

paths.on("mouseover", etc...)
    .on("mouseout", etc...)
    .on("click", etc...);
...