使用jQuery动态生成标记时，标记未显示
[英]Marker is not displaying when it is generated dynamically using jquery
问题描述
I created a marker to show at the end of the line element. 
我创建了一个标记以显示在line元素的末尾。 But my problem is that when the marker tag is generated dynamically it is not displayed at the end of the line. 但是我的问题是，当动态生成标记标记时，它不会显示在行尾。
What I do is that firstly I append svg to the html body. 我要做的是，首先将svg附加到html正文中。
var svg = d3.select('body').append("svg").attr("width", 300).attr("height", 300).attr("id", "cloud");
then I append marker to the svg. 然后我将标记附加到svg。
$('svg').append('<defs><marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0"markerWidth="6" markerHeight="6" orient="auto"><path d="M0,-5L10,0L0,5Z"></marker> </defs>');
Then I append line to the svg with attribute marker-end pointing to svg marker element. 然后，我将一行附加到svg的属性标记端指向svg标记元素。
svg.append("g").selectAll("line.link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.attr("marker-end", "url(#arrow)");
The marker is not displayed at the line end. 标记未显示在行尾。 Here is the link of that code in jsfiddle http://jsfiddle.net/2NJ25/2/ 这是jsfiddle中该代码的链接http://jsfiddle.net/2NJ25/2/
But when I remove the dynamic append using jquery and I define the marker tag inside the html like the code below it works here is the link that http://jsfiddle.net/AqK4L/4/ 但是，当我使用jquery删除动态附加并在html内定义标记标记时（如下面的代码一样），这里的链接是http://jsfiddle.net/AqK4L/4/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Cloud</title>
<script type="text/javascript" src="d3.v2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<svg id="cloud" width="800" height="600">
<defs>
<marker id="arrow" viewbox="0 -5 10 10" refX="18" refY="0"
markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,-5L10,0L0,5Z">
</marker>
</defs>
</svg>
<link href="cloud.css" rel="stylesheet" type="text/css" />
<script src="cloud.js" type="text/javascript"></script>
</body>
</html>
What is the problem when I generated the marker tag dynamically. 当我动态生成标记标记时会出现什么问题？ Why the marker is not displayed? 为什么不显示标记？ I want to generate the marker tag dynamically. 我想动态生成标记标签。 How to do this? 这个怎么做？
2 个解决方案
解决方案1
3 已采纳 2013-09-05 11:38:30
The problem is that by adding the SVG elements as text using jquery, they are getting interpreted in the wrong namespace. 问题在于，通过使用jquery将SVG元素添加为文本，它们在错误的名称空间中得到解释。 That is, there are no defs , marker , etc elements in HTML and therefore they don't do anything. 也就是说，HTML中没有defs ， marker等等元素，因此它们什么也不做。 These elements are only valid in the SVG namespace, which you don't specify when adding them dynamically. 这些元素仅在SVG命名空间中有效，在动态添加它们时未指定。 When they are specified statically, the namespace is obvious from the context. 静态指定它们时，从上下文中可以明显看出名称空间。
There are several ways to fix this. 有几种方法可以解决此问题。 You could explicitly create the nodes with the correct namespace and add them at the appropriate location. 您可以显式创建具有正确名称空间的节点，并将其添加到适当的位置。 An easier solution however is to use D3 to add those elements, which will take care of the namespace issues for you. 但是，更简单的解决方案是使用D3添加这些元素，这将为您解决名称空间问题。 The code would be a bit more verbose, but straightforward. 代码会更冗长一些，但很简单。
svg.append("defs").append("marker")
.attr("id", "arrow")
.attr("viewbox", "0 -5 10 10")
.attr("refX", 18)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
解决方案2
0 2013-09-05 12:56:12
Some code added. 添加了一些代码。 Check out my update 查看我的更新
1) 1）
var texts = svg.selectAll(".label")
.data(force.nodes())
.enter()
.append("text")
.attr("class", "label")
.attr("fill", "black")
.text(function(d) { return d.name; })
.call(force.drag);
2) 2）
texts.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
css 的CSS
.node, .label {
cursor:pointer;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.