使用RequireJS加载D3和Word云布局

Question

尝试使用RequireJS 加载D3 v4.8和文字云布局组件(https://github.com/jasondavies/d3-cloud)时遇到问题.当D3.js和d3.layout.cloud.js都被下载到浏览器时,抛出一个异常,表明d3.layout.cloud不是一个函数.

以下是我配置RequireJS的方法:

require.config({
    waitSeconds: 10,

    baseUrl: './scripts',

    paths: {
        d3: 'd3.min',
        jquery: 'jquery-2.1.0.min',
        cloud: 'd3.layout.cloud'
    },

    shim: {


    cloud: {
        deps:['jquery', 'd3']
    }

}

});

抛出异常的代码行是d3.layout.cloud().size([width,height]),可以在下面的函数中找到:

function wordCloud(selector) {

    var width = $(selector).width();
    var height = $(selector).height();

    //var fill = d3.scale.category20();

    //Construct the word cloud's SVG element
    var svg = d3.select(selector).append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate("+ width/2 +","+ height/2 +")")

    var fill = d3.scale.category20();

    //Draw the word cloud
    function draw(words) {
        var cloud = svg.selectAll("g text")
            .data(words, function(d) { return d.text; })

        //Entering words
        cloud.enter()
            .append("text")
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill(i); })
            .attr("text-anchor", "middle")
            .attr('font-size', 1)
            .style("cursor", "hand")
            .text(function(d) { return d.text; })
            .on("click", function (d, i){
                window.open("http://www.google.com/?q=" + d.text, "_blank");
            });

        //Entering and existing words
        cloud
            .transition()
            .duration(600)
            .style("font-size", function(d) { return d.size + "px"; })
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .style("fill-opacity", 1);

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


    //Use the module pattern to encapsulate the visualisation code. We'll
    // expose only the parts that need to be public.
    return {

        //Recompute the word cloud for a new set of words. This method will
        // asycnhronously call draw when the layout has been computed.
        //The outside world will need to call this function, so make it part
        // of the wordCloud return value.
        update: function(words) {

            // min/max word size
            var minSize = d3.min(words, function(d) { return d.size; });
            var maxSize = d3.max(words, function(d) { return d.size; });

            var textScale = d3.scale.linear()
                .domain([minSize,maxSize])
                .range([15,30]);

            d3.layout.cloud().size([width, height])
                .words(words.map(function(d) {
                    return {text: d.text, size: textScale(d.size) };
                }))
                .padding(5)
                .rotate(function() { return ~~(Math.random() * 2) * 90; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .on("end", draw)
                .start();
        }
    }

}

Answer 1

最新版本的 d3-cloud 仅依赖于 d3-dispatch，因此它应该可以与任何版本的 D3 一起正常工作。我认为这里的问题是您正在使用 RequireJS ( AMD ) 来引用该d3.layout.cloud.js文件，但您没有使用 RequireJS 来使用该库（按照cloud您的示例进行配置）。请参阅以下示例：

\n\n

requirejs.config({\n  baseUrl: ".",\n  paths: {\n    cloud: "d3.layout.cloud" // refers to ./d3.layout.cloud.js\n  }\n});\n\nrequirejs(["cloud"], function(cloud) { // depends on "cloud" defined above\n  cloud()\n    .size([100, 100])\n    .words([{text: "test"}])\n    .on("word", function() {\n      console.log("it worked!");\n    })\n    .start();\n});\n

\n\n

如果您更喜欢使用 CommonJS 风格，require(\xe2\x80\xa6)如果您使用适当的define(\xe2\x80\xa6)语法，也可以将其与 RequireJS 一起使用，如这个快速示例所示所示。

\n