1

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

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

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

4

2 回答 2

3

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

于 2013-09-05T11:38:30.773 回答
0

添加了一些代码。看看我的更新

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-05T12:56:12.980 回答