D3.js - 单词云.on(“点击”)功能不会触发

时间:2016-02-24 15:49:35

标签: javascript d3.js

我正在使用D3.js云词获得我所期待的词汇。但是,最后一个功能

.on("click", function(d) { console.log(d.text); });

不会触发,我没有任何错误消息。我找不到原因。有谁有想法吗?这是我的代码:

// User object
var currentExpert;

// Get user by id from server side
function getCurrentExpert(callback) {

    $.ajax({
        type: 'GET',
        url: "http://localhost:8080/iseenrea/rest/json/survey/get/currentUser/" + currentExpertId,
        dataType:"json",
        success: function(expert, status, xhr) {
            callback(expert);
        }, error: function(jqXHR, textStatus, errorThrown) {
            console.log(' Error in processing! '+ textStatus);
        }
    });
}

// Draw words cloud when the window is loaded
window.onload = function() {
    drawWordsCloud(currentExpert);
};

// Draw words cloud and print out the word on click
function drawWordsCloud(currentExpert) {
    getCurrentExpert(function(currentExpert) {

        var freqMax = d3.max(currentExpert.frequencies);
        var freqMin = d3.min(currentExpert.frequencies);

        var rScale = d3.scale.linear()
                    .domain([freqMin, freqMax])
                    .range([15, 50]);

        var fill = d3.scale.category20();

        var layout = d3.layout.cloud()
            .size([300, 300])
            .words(currentExpert.queries.map(function(d, i) {                   
                  return {text: d, size: rScale(currentExpert.frequencies[i])};
            }))
            .padding(2.5)
            .rotate(0) //function() { return ~~(Math.random() * 2) * 
            .font("Impact")
            .fontSize(function(d) { return d.size; })
            .on("end", draw);

        layout.start();

        function draw(words) {
          d3.select("#textArea").append("svg")
                .attr("id", "cloud")
              .attr("width", layout.size()[0])
              .attr("height", layout.size()[1])
            .append("g")
              .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
            .selectAll("text")
              .data(words)
            .enter().append("text")
              .style("font-size", function(d) {return d.size + "px"; })
              .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.text; })
              .on("click", function(d) {
                  console.log(d.text);
              }); 
        }
    })
}

0 个答案:

没有答案