我的目标是显示名称下方的日期组成的单词云。我找到了一个很酷的wordcloudBundle,它工作正常。但我似乎无法在Chrome中用新行显示名称下的日期。在Firefox中,它的工作原理很像。 这是使用以下单词绘制svg的draw函数:
function draw(words)
{
sl.domain(d3.extent(words.map(function(w) { return w.size; }))).range([100, 300]);
sc.domain(d3.map(words, function(w) { return w.cluster; }).keys());
d3.select("#wordCloud").append("svg")
.attr("width", layout.size()[0])
.attr("height", layout.size()[1])
.append("g")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("a")
.attr("href", "/Home/Tables/")
.attr("class", "wordCloudWord")
.attr("id", function(d) { return d.text })
.append("text")
.style("font-size", function(d) { return wordsizes[d.text] + "px"; })
.style("font-family", "Impact")
.style("line-height", function (d) { return wordsizes[d.text] + "px"; })
.style("fill", function(d) { return colors[d.text]; })
.attr("text-anchor", "middle")
.attr("transform",
function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
**.text((function (d) { return d.text +"\r\n"+endDates[d.text]}))
.attr("id", "nameWordCloud");
}`
带**的行是最重要的行,在这里我说我想在名称和日期之间看到一个新行。 我还尝试添加新文本,但是.after,.add,.insertAfter,...和所有其他您无法图像化的错误给出了相同的错误:“ ...不是函数”。另外,如果我尝试使用它代替.append。 因此,尝试获取两个文本块以使它们出现在彼此下面是一种解决方案(我也尝试过)。 我也尝试过代替星星行:
.html((function (d) { return d.text + "<br/>" + endDates[d.text] }))
但是这在两种浏览器中都不起作用,甚至很难在检查器中显示出来,因为我可以看到它呈现了这一点:
<text text-anchor="middle" transform="translate(0,0)rotate(0)" id="nameWordCloud"
style="font-size: 75px; font-family: Impact; line-height: 75px; fill: blue;">
DIRK
<br>
22/4
</text>
所以我已经尝试了很多,但只有在Firefox中,这是第一个带有**的东西。
因此svg或其他内容的呈现也没有任何问题,只是不想在某些浏览器中显示的那一行新行。
PS:JavaScript文件非常长,但是我想这是唯一相关的代码。如果似乎没有足够的代码来找到解决方案,请告诉我