新行未在Chrome中显示(javascript)

时间:2018-12-05 14:55:11

标签: javascript word-cloud

我的目标是显示名称下方的日期组成的单词云。我找到了一个很酷的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文件非常长,但是我想这是唯一相关的代码。如果似乎没有足够的代码来找到解决方案,请告诉我

0 个答案:

没有答案