d3ワードクラウドを新しいデータで更新/修正する

Question

d3.js wordcloudを使用してデータの選択と変更を行う方法を理解しようとしています。

現在、インデックス化されたキーに応じて、選択したデータの上位10個の結果を表示しています。キーに応じてこのデータを切り替えることができるようにしたいと思います。

ここまではplnkです。

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

私はこれらのガイド、General Update Pattern, IIIとAnimated d3 word cloudを参照しようとしてきました。しかし、最終的な更新機能を導入する方法を理解するのは難しいです。これを参照するほとんどすべてのガイドでは、通常、更新する方法を示すためにsetTimeoutを使用し、私の脳は接続を確立しません。

アドバイスは大歓迎です！

乾杯、

（ここではコード）

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

私は更新がどのように機能するかを見るために、その機能を追加しましたので、私はあなたのコード内の任意の更新機能を見ていません。あなたが希望の会場がある追加のパラメータを受け取るために、私はあなたのsortObject機能を変更

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(); 
} 

目的のデータを再配置を計算する必要が正しく更新するD3ワードクラウドためには

// 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); 

：ここでは

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

は作業plnkrです：http://plnkr.co/edit/B20h2bNRkyTtfs4SxE0v?p=preview

この方法を使用して、希望する制限で更新することができます。更新機能をトリガーするイベントリスナーを含むチェックボックスを追加することができます。あなたのHTML内

：あなたのJavaScriptで

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

：

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