Обновление словарного облака с помощью D3.js

Question

У меня есть два символа, каждый из которых отображает данные публикации в год, а другой - это слово облако. Облако слов отображает заголовки.

Вот DEMO.

Когда я навешиваю на лету (2011-2015), я хочу обновить слово облако в те годы.

Когда я впервые навел курсор мыши на год, он обновляет слово облако. Но, когда я накладываю указатель мыши на второй или третий раз, он не будет обновляться.

Любая идея, почему это происходит?

Буду признателен за любую помощь.

Спасибо!

Answer 1

Пар вещей:

1. В вашей prepareCloudJS функции, вы возвращаетесь результаты find_duplicates, которые всегда, кажется, пустой массив. Похоже, что вы не проверяете дубликаты правильно, так как я вижу в данных, что должны быть дубликаты, но они не обнаруживаются правильно из-за заглавной и/или пунктуации.

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

2. Когда вы перерисовываете слово облако в своей функции drawUpdate, вы не в порядке следите за шаблоном enter, update, exit. Mike's thinking with joins может помочь здесь, а также проверить ссылку «Общий шаблон обновления» внизу этой страницы.

   Вы могли бы сделать что-то вроде:

   function drawUpdate(words){ 
       d3.layout.cloud().size([960, 600]) 
         .words(words) 
         .padding(5) 
         .rotate(function() { return ~~(Math.random() * 2) * 90; }) 
         .font("Impact") 
         .fontSize(function(d) { return d.size; }) 
         .start(); 
   
       // new variable to hold the selection 
       var words = area1.select("#svg2") 
         .selectAll("g") 
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
         .attr("transform", "translate(150,150)"); 
         .selectAll("text") 
         .data(words); 
   
       // append new text elements 
       words.enter().append("text"); 
   
       // update all words in the word cloud (when you append 
       // nodes from the "enter" selection, d3 will add the new 
       // nodes to the "update" selection, thus all of them will 
       // be updated here. 
       words.style("font-size", function(d) { return d.size + "px"; }) 
        .style("font-family", "Impact") 
        .style("fill", function(d, i) { return fill(i); }) 
        .attr("transform", function(d) { 
         return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
        }) 
        .text(function(d) { return d.text; }); 
   
       words.exit().remove(); // new line to remove all unused words 
   }