Aktualisieren/Ändern von d3-Wortwolke mit neuen Daten

Question

Ich versuche herauszufinden, wie Sie ändern und aktualisieren von einer Auswahl von Daten mit d3.js wordcloud.

Derzeit zeige ich die Top 10 Ergebnisse aus einer Auswahl von Daten in Abhängigkeit von indizierten Schlüsseln. Ich würde gerne in der Lage sein, diese Daten abhängig von den Tasten zu wechseln, oder wenn ich die oberen 10 oder unteren 10 Wörter haben möchte.

hier ist ein PLNK so weit;

http://plnkr.co/edit/cDTeGDaOoO5bXBZTHlhV?p=preview

Ich habe versucht, auf diese Führer zu beziehen, General Update Pattern, III und Animated d3 word cloud. Ich habe jedoch Schwierigkeiten zu verstehen, wie man eine letzte Update-Funktion einführt, da fast alle Anleitungen, die sich darauf beziehen, normalerweise ein setTimeout verwenden, um zu demonstrieren, wie man aktualisiert, und mein Gehirn wird die Verbindung einfach nicht herstellen.

Jede Beratung ist herzlich willkommen!

Cheers,

(Code hier)

var width = 455; 
var height = 310; 
var fontScale = d3.scale.linear().range([0, 30]); 
var fill = d3.scale.category20(); 

var svg = d3.select("#vis").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")") 
    // .selectAll("text") 

d3.json("data.json", function(error, data) { 
    if (error) { 
     console.log(error) 
    } 
    else { 
     data = data 
    } 

    function sortObject(obj) { 
     var newValue = []; 
     var orgS = "MC"; 
     var dateS = "Jan"; 
     for (var question = 0; question < data.questions.length; question++) { 
      var organization = data.organizations.indexOf(orgS); 
      var date = data.dates.indexOf(dateS); 
      newValue.push({ 
       label: data.questions[question], 
       value: data.values[question][organization][date] 
      }); 
     } 
     newValue.sort(function(a, b) { 
      return b.value - a.value; 
     }); 
     newValue.splice(10, 50) 
     return newValue; 
    } 
    var newValue = sortObject(); 


    fontScale.domain([ 
     d3.min(newValue, function(d) { 
      return d.value 
     }), 
     d3.max(newValue, function(d) { 
      return d.value 
     }), 
    ]); 

    d3.layout.cloud().size([width, height]) 
     .words(newValue) 
     .rotate(0) 
     .text(function(d) { 
      return d.label; 
     }) 
     .font("Impact") 
     .fontSize(function(d) { 
      return fontScale(d.value) 
     }) 
     .on("end", draw) 
     .start(); 

    function draw(words) { 
     var selectVis = svg.selectAll("text") 
      .data(words) 
     selectVis 
      .enter().append("text") 
      .style("font-size", function(d) { 
       return fontScale(d.value) 
      }) 
      .style("font-family", "Impact") 
      .style("fill", function(d, i) { 
       return fill(i); 
      }) 
      .attr("text-anchor", "middle") 
      .attr("transform", function(d) { 
       return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
      }) 
      .text(function(d) { 
       return d.label; 
      }) 

     selectVis 
      .transition() 
      .duration(600) 
      .style("font-size", function(d) { 
       return fontScale(d.value) 
      }) 
      .attr("transform", function(d) { 
       return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
      }) 
      .style("fill-opacity", 1); 

     selectVis.exit() 
     .transition() 
      .duration(200) 
      .style('fill-opacity', 1e-6) 
      .attr('font-size', 1) 
      .remove(); 
    } 
}); 

Answer 1

ich keine Update-Funktion im Code sehen war, so habe ich diese Funktionalität, um zu beobachten, wie das Update funktioniert.

// Add a select elemnt to the page 
var dropDown = d3.select("#drop") 
    .append("select") 
    .attr("name", "food-venues"); 
// Join with your venues 
var foodVenues = data.organizations.map(function(d, i) { 
    return d; 
}) 
// Append the venues as options 
var options = dropDown.selectAll("option") 
    .data(foodVenues) 
    .enter() 
    .append("option") 
    .text(function(d) { 
     return d; 
    }) 
    .attr("value", function(d) { 
     return d; 
    }) 
// On change call the update function 
dropDown.on("change", update); 

Damit eine Wolke d3 Wort richtig bearbeiten Sie wieder das Layout mit den gewünschten Daten berechnen müssen

function update() { 
    // Using your function and the value of the venue to filter data 
    var filteredData = sortObject(data, this.value); 
    // Calculate the new domain with the new values 
    fontScale.domain([ 
    d3.min(newValue, function(d) { 
     return d.value 
    }), 
    d3.max(newValue, function(d) { 
     return d.value 
    }), 
    ]); 
    // Calculate the layout with new values 
    d3.layout.cloud() 
    .size([width, height]) 
    .words(filteredData) 
    .rotate(0) 
    .text(function(d) { 
     return d.label; 
    }) 
    .font("Impact") 
    .fontSize(function(d) { 
     return fontScale(d.value) 
    }) 
    .on("end", draw) 
    .start(); 
} 

ich Ihre sortObject Funktion modifiziert, um einen zusätzlichen Parameter zu erhalten, die die gewünschte Veranstaltungsort ist :

function sortObject(obj, venue) { 
    var newValue = []; 
    var orgS = venue || "MC"; 
    // .... 
} 

Hier ist die Arbeits plnkr: http://plnkr.co/edit/B20h2bNRkyTtfs4SxE0v?p=preview

Sie sollten diesen Ansatz verwenden können, um mit Ihren gewünschten Einschränkungen zu aktualisieren. Sie können möglicherweise ein Kontrollkästchen mit einem Ereignis-Listener hinzufügen, der die Aktualisierungsfunktion auslöst.

in Ihrem HTML:

<input checked type="checkbox" id="top" value="true"> <label for="top">Show top words</label> 

In Ihrem javascript:

var topCheckbox = d3.select('#top') 
    .on("change", function() { 
    console.log('update!') 
    });