使用jquery動態生成標記時不顯示標記

我創建了一個標記以顯示在行元素的末尾。但我的問題是，當標記標記是動態生成時，它不會顯示在行的末尾。使用jquery動態生成標記時不顯示標記

我所做的是首先將svg附加到html正文。

var svg = d3.select('body').append("svg").attr("width", 300).attr("height", 300).attr("id", "cloud");

然後我將標記添加到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>');

然後我將行追加到svg屬性marker-end指向svg標記元素。

svg.append("g").selectAll("line.link") 
     .data(force.links()) 
     .enter().append("line") 
     .attr("class", "link") 
     .attr("marker-end", "url(#arrow)");

標記不顯示在行尾。下面是代碼的的jsfiddle http://jsfiddle.net/2NJ25/2/

鏈接但是，當我使用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>

動態生成標記標記時會出現什麼問題。爲什麼標記不顯示？我想動態生成標記標記。這個怎麼做？

來源

2013-09-05 Jetson John

問題是，通過使用jQuery添加SVG元素作爲文本，他們得到解釋在錯誤的名稱空間。也就是說，HTML中沒有defs,等元素，因此他們什麼都不做。這些元素僅在SVG命名空間中有效，您在動態添加SVG時不指定它們。當它們被靜態指定時，命名空間在上下文中是顯而易見的。

有幾種方法可以解決這個問題。您可以使用正確的名稱空間顯式創建節點，並將它們添加到適當的位置。然而，更簡單的解決方案是使用D3來添加這些元素，這將爲您處理名稱空間問題。代碼會稍微冗長些，但很直接。

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");

更新了jsfiddle here。

來源

2013-09-05 11:38:30

爲什麼即使使用D3它劇照中看不到？我如何顯式聲明名稱空間？ –

很難說不知道你在做什麼。 –

添加了一些代碼。看看我的update

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）

texts.attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    });

CSS

.node, .label { 
    cursor:pointer; 
}

來源

2013-09-05 12:56:12

使用jquery動態生成標記時不顯示標記

回答

相關問題