d3 js换行符在使用html的文本中不起作用

我已经阅读了几个关于SO的答案，并尝试了各种不同的方法，没有运气。

这拨弄显示当前全功能的d3.js样品，用断裂标签不呈现问题：

的代码中的相关位是在这里：

node.insert("text") 
    .attr("class", "text") 
    .style("text-anchor", "middle") 
    .html(function(d) { 
     var html = d.name.split(" "); 
     return html.join("<br>"); 
    });

注：如果您有任何d3专家对我构建的代码有更多意见/观察，请告诉我。当我完成后，我希望这个代码是一流的。

来源

2013-08-30 cale_b

您不能直接将HTML放入SVG中。您需要使用foreignObject元素来嵌入HTML。这是另一个解决这个问题的问题：Auto line-wrapping in SVG text。

来源

2013-08-30 15:46:03

谢谢。由于该答案引用了XML，你有没有解释如何用javascript/css实现这一目标的代码？ –

我不确定你的意思。您的d3代码在修改DOM时使用JavaScript构建XML。 –

我明白了。顺便说一句，我的意思是：答案显示了XML结构，它没有显示将生成该结构的d3脚本。这花费了相当数量的摆弄工作。 –

只是为了完整性起见，我想后最终D3/js代码，我结束了使用，以产生（每@ScottCameron接听）XML：

node.append("foreignObject") 
    .attr("class", "label") 
    .attr("width", "120") 
    .attr("height", "120") 
    .attr("transform", "translate(-60,-60)") 
    .html(function(d) { 
     var html = d.name.split(" "); 
     return html.join("<br>"); 
    });

来源

2013-08-30 16:40:03

d3 js换行符在使用html的文本中不起作用

回答

相关问题