将 D3-WordCloud 中的主词水平居中

Posted 2023-03-29

【中文标题】将 D3-WordCloud 中的主词水平居中

【英文标题】：Center the main Word from D3-WordCloud horizontally

【发布时间】：2013-03-14 18:35:54

【问题描述】：

我有以下 WordCloud。 原始代码来自 Jason Davies D3-javascript-WordCloud Example。 https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html

下面的大部分代码来自这个非常有用的教程（德语）： http://www.advitum.de/blog/2012/04/tagcloud-mit-php-und-javascript-erstellen-word-cloud-d3/ 谢谢拉尔斯·艾伯特！

编辑：现在我学到了更多。我已经清除了无意义的代码。

我的目标是将数组中的第一个单词水平居中。

第一个单词现在水平居中，但现在 Cloud 中有一个间隙。 就在单词没有定位的 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; );

【问题讨论】：

能不能把完整的 html、css 和 js 组合贴出来？

【参考方案1】：

使用等于尺寸计算之一的负边距：

 wordcloud.selectAll("text")
     ...
     ...
     ...
     .style("margin-left", function(d) return d.size + "px")