英文:
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 = ["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; });
}
<!-- language: lang-css -->
.word {
font-size: 1em;
fill: steelblue;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论