Question

我在线元素的末尾创建了一个标记。但我的问题是，当动态生成标记标记时，它不会显示在行的末尾。

我所做的是首先将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>

动态生成标记标记时有什么问题。为什么不显示标记？我想动态生成标记标记。这该怎么做？

Answer 1

问题在于，通过使用jquery将SVG元素添加为文本，它们将在错误的命名空间中被解释。也就是说，HTML中没有defs，marker等元素，因此它们不会执行任何操作。这些元素仅在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。

Answer 2

添加了一些代码。看看我的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;
}

使用jquery动态生成标记时不显示标记

2 个答案: