我正在使用D3生成条形图(我使用了此示例中的代码).我在x轴上使用的标签每个都是两个字,因为这使得所有标签重叠,我需要跨行打破这些标签.(如果我可以用换行符替换每个标签中的所有空格,那就没问题了.)
我最初尝试使用文字换行符(
)替换空格并xml:space="preserve"在标签<text>元素上设置.不幸的是,事实证明SVG不尊重这个属性.接下来,我尝试将每个单词包装成<tspan>我以后可以使用的单词.我通过这个函数传递了每个标签:
function (text) {
return '<tspan>' + text.replace(/ /g, '</tspan><tspan>') + '</tspan>';
}
但这只是将文字<tspan>放入输出中.如何将文本标签包装在tspans中(或执行其他操作)以使我的标签不重叠？
HTML5支持<svg>标记,允许将SVG嵌入到HTML中.
深入挖掘,我可以在<svg>片段中嵌入一些HTML 吗？例如,我想<table>在我的SVG图形的某些部分放置一个CSS .
我做了一个小测试,Chrome12不喜欢<p>里面的HTML <svg>.是否有一些技术可以使它工作(例如可能是一个html容器标签？)？
对于这个问题,我需要找到特定节点下的所有文本节点.我可以这样做:
function textNodesUnder(root){
var textNodes = [];
addTextNodes(root);
[].forEach.call(root.querySelectorAll('*'),addTextNodes);
return textNodes;
function addTextNodes(el){
textNodes = textNodes.concat(
[].filter.call(el.childNodes,function(k){
return k.nodeType==Node.TEXT_NODE;
})
);
}
}
然而,鉴于XPath可以简单地查询.//text()并完成它,这似乎是不优雅的.
将所有文本节点放在HTML文档中的特定元素下的最简单方法是什么,适用于IE9 +,Safari5 +,Chrome19 +,Firefox12 +,Opera11 +？
"最简单"被宽松地定义为"有效且短暂,没有打高尔夫球".
为了好玩,我试着看看我能在多大程度上实现一个用于RIA的SVG浏览器客户端,我在业余时间搞乱了.
但是看起来似乎是一个巨大的绊脚石.没有自动换行!!
有没有人知道任何工作(我在想某种JavaScript或特殊标签,我不知道)？
如果不是,我要么必须走xhtml路线并开始在我的SVG(哎哟)中粘贴HTML元素,要么在SVG 1.2准备好的十年后再回来.
我在SVG中有一个代码:
<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
</svg>
现在我需要在此之间添加一个文本rectangle.谁能告诉我怎么做？
我想在我创建的矩形内写文本,如下所示:
body = d3.select('body')
svg = body.append('svg').attr('height', 600).attr('width', 200)
rect = svg.append('rect').transition().duration(500).attr('width', 150)
.attr('height', 100)
.attr('x', 40)
.attr('y', 100)
.style('fill', 'white')
.attr('stroke', 'black')
text = svg.append('text').text('This is some information about whatever')
.attr('x', 50)
.attr('y', 150)
.attr('fill', 'black')?
但是,正如您所见(http://jsfiddle.net/Tmj7g/3/),文本被切断了.创建svg矩形内部的段落的任何好方法？谢谢,
似乎行高是svg文本中缺少的一个CSS属性.我发现SVG的最佳资源是:Jenkov.com SVG教程并没有提及它,我也没有在MDN上找到它.
因此,如果有人能够明确地阐明这一点或分享技术.我基本上对包装的文本行之间的间距感兴趣,而不是独立的文本元素.
谢谢
为了清楚起见,我不是从一个矩形文本框开始并漂浮在不规则图像周围.我创建一个任意形状,然后键入文本,以最好地适应这种形状.是否有jquery插件或html5画布？这甚至可能吗？
这是我的 svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgfile" style="position:absolute; height:1200px; width:1600px;" version="1.1" viewBox="0 0 1600 1200">
<g class='shape' id='draw136.1' shape='text1' style='word-wrap: break-word; font-family: Arial; font-size: 30.599999999999998px;' undo='-1'>
<switch>
<foreignObject color='#000000' height='67.53719008264463' width='216.80495662949198' x='740.5638166047088' y='501.5702479338843'>
<p xmlns='http://www.w3.org/1999/xhtml'>Test Writing in the box</p>
</foreignObject>
</switch>
</g>
</svg>
当我运行以下 ImageMagick 脚本时
convert 26.svg 26.png
我得到的只是一个空的png
所以如果我将 svg 更改为以下形式
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgfile" style="position:absolute; height:1200px; width:1600px;" version="1.1" viewBox="0 0 1600 1200">
<text color='#000000' style='font-family: Arial; font-size: 30.599999999999998px;' height='67.53719008264463' width='216.80495662949198' x='740.5638166047088' y='501.5702479338843'>
Test Writing in the box
</text> …我想将文本向右对齐，在这种情况下，我必须将文本设置为固定宽度。因为文本内容是动态添加的。
<text>
<tspan x="421" y="15" text-anchor="right"
baseline-shift="0%" kerning="0"
font-family="Arial" font-weight="bold"
font-size="12" fill="#490275" xml:space="preserve">
This is entered by user.
</tspan>
</text>
我有一个d3.js的甜甜圈,我想在它的中心放一些信息.我可以追加文本元素,但我想在那里放一个格式化的信息,所以我决定在mouseover上添加div:
$(".arc").on("mouseover",(function(){
d3.select("text").remove();
var appendingString="<tspan>"+cityName[$(this).attr("id")]+"</tspan> <tspan>"+$(this).attr("id")+"%</tspan>";
group
.append("text")
.attr("x",-30)
.attr("y",-10)
.text(appendingString);
}));
由于某种原因div成功添加了我需要但不显示的信息.追加它的正确方法是什么,还是有其他替代方法？完整脚本如果需要:
<script>
var cityNames=["?????????","???????","?????","???????"];
var cityPercentage=[50,30,20,10];
var width=300,
height=300,
radius=100;
var color=d3.scale.linear()
.domain([0,60])
.range(["red","blue"]);
var cityDivision = d3.select("#cities")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("class","span4");
var group=cityDivision.append("g")
.attr("transform","translate(" + width / 2 + "," + height / 2 + ")");
var arc=d3.svg.arc()
.innerRadius(radius-19)
.outerRadius(radius);
var pie= d3.layout.pie()
.value(function(d){return d;});
var cityName={
50:"?????????",
30:"???????",
20:"?????",
10:"???????"
}
var arcs=group.selectAll(".arc")
.data(pie(cityPercentage))
.enter()
.append("g")
.attr("class","arc")
.attr("id",function(d){return d.data;});
arcs.append("path")
.attr("d",arc)
.attr("fill",function(d){return color(d.data);});
//?????????? …