3

次のWordCloudがあります。元のコードは Jason Davies D3-JavaScript-WordCloud Example からのものです。 https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

以下のコードのほとんどは、この非常に役立つチュートリアル (ドイツ語) からのものです 。 ラース・エバートありがとう！

編集：今、私はもう少し学びました。無意味なコードをクリアしました。

私の目標は、配列の最初の単語を水平方向に中央揃えにすることです。

最初の単語は水平方向に中央揃えになりましたが、クラウドにギャップが生じています。単語が配置されていない x,y ポイントのちょうどその位置。

私の新しい質問は次のとおりです。このギャップを取り除くにはどうすればよいですか?

ありがとうございました。

var wordcloud, size = [800, 800]; //Cloud Size
var fillColor = d3.scale.category20b();

function loaded() {
    d3.layout.cloud()
        .size(size) 
        .words(words)
        .font("Impact")
        .fontSize(function(d) { return d.size;})
        .rotate(function() { return ~~(Math.random() * 2) * 90; })
        .on("end", draw)
        .start();       
}

function draw(words) {
    wordcloud = d3.select("body")
        .append("svg")
        .attr("width", size[0])
        .attr("height", size[1])
        .append("g")
        .attr("transform", "translate(" + (size[0]/2) + "," + (size[1]/2) + ")");
    wordcloud.selectAll("text")
        .data(words)
        .enter()
        .append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("fill", function(d) { return fillColor(d.text.toLowerCase()); })
        .attr("text-anchor", "middle")

     //Edit
    .attr("transform", function(d, i) {
        if(i == 0){
            return "translate(" + [0, 0] + ")rotate(" + 0 + ")";    //handle first element
        }else{
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; //handle the rest
        }
    })
    //--------------

    .text(function(d) { return d.text; });
}
4

1 に答える 1

0

サイズ計算の 1 つに等しい負のマージンを使用します。

 wordcloud.selectAll("text")
     ...
     ...
     ...
     .style("margin-left", function(d) {return d.size + "px"})
于 2014-06-20T01:45:35.393 に答える