使用新数据更新/修改d3字云

Question

我试图弄清楚如何使用d3.js wordcloud从一系列数据中修改和更新.

目前,我根据索引键显示选择数据的前10个结果.我希望能够根据键切换这些数据,或者如果我想要前10个或后10个单词.

这是迄今为止的一个方面;

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

我一直在尝试参考这些指南,一般更新模式,III和动画d3文字云.但是,我很难理解如何引入最终更新功能,因为几乎所有引用它的指南通常都使用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();
    }
});