将定位更改为绝对以包含词云。

huangapple go评论67阅读模式
英文:

Changing the positioning to absolute to contain a word cloud

问题

我写了以下代码以生成D3中的词云:

HTML

<html>

<head>
    <title>文本数据的D3词云</title>

    <link rel="stylesheet" href="style-sheet.css">
</head>

<body>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.js"></script>

    <svg width="500" height="300"></svg>

    <script src="data-script.js"></script>
</body>

</html>

CSS

.word {
    font-size: 2em;
    fill: steelblue;
}

JS

var data = ["hello", "world", "d3", "word", "cloud", "visualization"];

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = { top: 20, right: 20, bottom: 30, left: 40 },
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var layout = d3.layout
    .cloud()
    .size([width - margin.left - margin.right, height - margin.top - margin.bottom])
    .words(data.map(function (d) { return { text: d, size: 10 + Math.random() * 20 }; }))
    .padding(5)
    .rotate(function () { return ~~(Math.random() * 2) * 90; })
    .fontSize(function (d) { return d.size; })
    .on("end", draw);

layout.start();

function draw(words) {
    g.selectAll(".word")
        .data(words)
        .join("text")
        .attr("class", "word")
        .style("font-size", function (d) { return d.size + "px"; })
        .style("fill", function (d, i) { return "steelblue"; })
        .attr("text-anchor", "middle")
        .attr("transform", function (d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function (d) { return d.text; });
}

但后来我注意到词语有时会被截断并溢出SVG元素之外。我无法弄清楚如何修复它(除了调整字体大小和填充,这并不总是有效),所以我寻求建议,有人告诉我:改变绝对定位!

因此,我修改了我的CSS代码如下:

.word {
    font-size: 2em;
    fill: steelblue;
    position: absolute;
}

但那也没有起作用...

我该如何解决这个问题?

英文:

I wrote the following code to generate a word cloud in D3:

HTML

<html>

<head>
    <title>D3 Word Cloud for Textual Data</title>

    <link rel="stylesheet" href="style-sheet.css">
</head>

<body>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.js"></script>

    <svg width="500" height="300"></svg>

    <script src="data-script.js"></script>
</body>

</html>

CSS

.word {
    font-size: 2em;
    fill: steelblue;
}

JS

var data = ["hello", "world", "d3", "word", "cloud", "visualization"];

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = { top: 20, right: 20, bottom: 30, left: 40 },
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var layout = d3.layout
    .cloud()
    .size([width - margin.left - margin.right, height - margin.top - margin.bottom])
    .words(data.map(function (d) { return { text: d, size: 10 + Math.random() * 20 }; }))
    .padding(5)
    .rotate(function () { return ~~(Math.random() * 2) * 90; })
    .fontSize(function (d) { return d.size; })
    .on("end", draw);

layout.start();

function draw(words) {
    g.selectAll(".word")
        .data(words)
        .join("text")
        .attr("class", "word")
        .style("font-size", function (d) { return d.size + "px"; })
        .style("fill", function (d, i) { return "steelblue"; })
        .attr("text-anchor", "middle")
        .attr("transform", function (d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function (d) { return d.text; });
}

But then I noticed the words are sometimes cut off and spilled over outside of the SVG element. I could not figure out how to fix it (other than playing with font size and padding which did not always work) so I asked for advice and I was told: Change the absolute positioning!

So, I modified my css code as following:

.word {
    font-size: 2em;
    fill: steelblue;
    position: absolute;
}

But that did not work either...

How do I fix this issue?

答案1

得分: 1

一切都做得很完美,但分组元素 g 的翻译数值有误。

使用宽度和高度的一半来使 g 元素居中。然后每个单词都将位于 svg 内部。

var data = ["hello", "world", "d3", "word", "cloud", "visualization"];

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = { top: 20, right: 20, bottom: 30, left: 40 },
    g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")");//center the g element by taking half of height and width

var layout = d3.layout
    .cloud()
    .size([width - margin.left - margin.right, height - margin.top - margin.bottom])
    .words(data.map(function (d) { return { text: d, size: 10 + Math.random() * 20 }; }))
    .padding(5)
    .rotate(function () { return ~~(Math.random() * 2) * 90; })
    .fontSize(function (d) { return d.size; })
    .on("end", draw);

layout.start();

function draw(words) {
    g.selectAll(".word")
        .data(words)
        .join("text")
        .attr("class", "word")
        .style("font-size", function (d) { return d.size + "px"; })
        .style("fill", function (d, i) { return "steelblue"; })
        .attr("text-anchor", "middle")
        .attr("transform", function (d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function (d) { return d.text; });
}
.word {
    font-size: 1em;
    fill: steelblue;
}
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.js"></script>

<svg width="500" height="300"></svg>
英文:

Everything you done is perfect but the grouping element g has wrong translation values.

> Use half of width and height to center the g element. Then every word will become inside of svg.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var data = [&quot;hello&quot;, &quot;world&quot;, &quot;d3&quot;, &quot;word&quot;, &quot;cloud&quot;, &quot;visualization&quot;];
var svg = d3.select(&quot;svg&quot;),
width = +svg.attr(&quot;width&quot;),
height = +svg.attr(&quot;height&quot;),
margin = { top: 20, right: 20, bottom: 30, left: 40 },
g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width/2 + &quot;,&quot; + height/2 + &quot;)&quot;);//center the g element by taking half of height and width
var layout = d3.layout
.cloud()
.size([width - margin.left - margin.right, height - margin.top - margin.bottom])
.words(data.map(function (d) { return { text: d, size: 10 + Math.random() * 20 }; }))
.padding(5)
.rotate(function () { return ~~(Math.random() * 2) * 90; })
.fontSize(function (d) { return d.size; })
.on(&quot;end&quot;, draw);
layout.start();
function draw(words) {
g.selectAll(&quot;.word&quot;)
.data(words)
.join(&quot;text&quot;)
.attr(&quot;class&quot;, &quot;word&quot;)
.style(&quot;font-size&quot;, function (d) { return d.size + &quot;px&quot;; })
.style(&quot;fill&quot;, function (d, i) { return &quot;steelblue&quot;; })
.attr(&quot;text-anchor&quot;, &quot;middle&quot;)
.attr(&quot;transform&quot;, function (d) {
return &quot;translate(&quot; + [d.x, d.y] + &quot;)rotate(&quot; + d.rotate + &quot;)&quot;;
})
.text(function (d) { return d.text; });
}

<!-- language: lang-css -->

.word {
font-size: 1em;
fill: steelblue;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://d3js.org/d3.v7.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.js&quot;&gt;&lt;/script&gt;
&lt;svg width=&quot;500&quot; height=&quot;300&quot;&gt;&lt;/svg&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月11日 11:24:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/75982181.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定