javascript - D3 节点的标签和图像错误地显示在屏幕的左上角

Question

我能够获取要为节点显示的图像和标签，但它们显示在屏幕的左上角。

当我使用它时节点显示在正确的位置

.enter().append("circle")

当我使用它时，标签和节点图像显示在左上角(不正确):

.enter().append("g")

这适用于追加“circle”(在下面的代码中注释掉):

当我注释掉 append circle 并使用 append "g"(为了使用节点图像和标签)时，图像和标签都显示在 (0,0) 附近而不是节点附近:

此外，附加“g”到底是什么？在哪里可以找到有关附加“g”的可能性的文档？

这里是所有的代码:

<script>
        var width = 960,
            height = 500;

        var color = d3.scale.category20();

        var force = d3.layout.force()
            .charge(-120)
            .linkDistance(30)
            .size(\[width, height\]);

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

        var graph = getData();

        var nodeMap = {};

        graph.nodes.forEach(function(d) { nodeMap\[d.name\] = d; });

        graph.links.forEach(function(l) {
            l.source = nodeMap\[l.source\];
            l.target = nodeMap\[l.target\];
        })

        force.nodes(graph.nodes)
            .links(graph.links)
            .start();

        var link = svg.selectAll(".link")
            .data(graph.links)
            .enter().append("line")
            .attr("class", "link")
            .style("stroke", function(d) {
                return d.line_color;
            })
            .style("stroke-width", function(d) {
                return Math.sqrt(d.value)+1;
            });

        var node = svg.selectAll(".node")
            .data(graph.nodes)
            // .enter().append("circle")
            //   .attr("class", "node")
            //   .attr("r", 10)
            //   .style("fill", function(d) { return d.fill_color; })
            //   .call(force.drag);
            .enter().append("g")
              .attr("class", "node")
              .attr("r", 15)
              .style("fill", function(d) { return d.fill_color; })
              .on("click", function(d){
                alert("You clicked on node " + d.name);
              })
              .call(force.drag);

        node.append("title")
            .text(function(d) { return d.label; });

        node.append("image")
          .attr("xlink:href", function(d) { return d.image_url })
          .attr("x", -8)
          .attr("y", -8)
          .attr("width", 26)
          .attr("height", 26);

        node.append("text")
          .attr("dx", function(d) { 
              if (d.image_url == "/profile.png"){
                return 100;
              }
              else{
                return 16;
              }
          })
          .attr("dy", function(d) { 
              if (d.image_url == "/profile.png"){
                return 100;
              }
              else{
                return ".35em";
              }
          })
          // .attr("dy", ".35em")
          .text(function(d) { return d.name });

        force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
        });


        function getData() {
          return {
                "nodes":\[
                        {"name":"user1","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                        {"name":"user2","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                        {"name":"user3","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                        {"name":"tag1","image_url":"","fill_color":"blue","text_color":"black"},
                        {"name":"tag2","image_url":"","fill_color":"blue","text_color":"black"},
                        {"name":"tag3","image_url":"","fill_color":"blue","text_color":"black"}
                    \],
                "links":\[
                        {"source":"tag1","target":"user1","value":1,"line_color":"green"},
                        {"source":"tag2","target":"user1","value":1,"line_color":"green"},
                        {"source":"tag3","target":"user1","value":1,"line_color":"green"},
                        {"source":"tag1","target":"user2","value":1,"line_color":"green"},
                        {"source":"tag2","target":"user2","value":1,"line_color":"green"}
                \]
          };
        }
    </script>

Answer 1

用 .append("g") 你插入一个 SVG Group Element .

问题是，您尝试将圆的属性(例如带 .attr("r",15) 的半径)应用于组元素。

如果你想画一个圆，你必须使用圆。组元素没有任何形状。它们用于对圆圈等元素进行分组。

一个解决方案是追加 g 元素并将其转换为节点的位置。我在以下代码段中更新了您的代码。我使用了组元素，并在组元素中添加了圆圈、图像和文本。

此外，我删除了每个尖括号前的反斜杠，并将标题设置为字段 name 而不是 label。

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

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

var graph = getData();

var nodeMap = {};

graph.nodes.forEach(function(d) { nodeMap[d.name] = d; });

graph.links.forEach(function(l) {
    l.source = nodeMap[l.source];
    l.target = nodeMap[l.target];
})

force.nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
    .enter()
  .append("line")
    .attr("class", "link")
    .style("stroke", function(d) {
        return d.line_color;
    })
    .style("stroke-width", function(d) {
        return Math.sqrt(d.value)+1;
    });

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter()
  .append("g")
    .attr("transform", function(d){return "translate("+d.x+","+d.y+")"})
    .call(force.drag);

node.append("circle")
    .attr("class", "node")
    .attr("r", 15)
    .style("fill", function(d) { return d.fill_color; })
    .on("click", function(d){
      alert("You clicked on node " + d.name);
    });

node.append("title")
    .text(function(d) { return d.name; });

node.append("image")
    .attr("xlink:href", function(d) { return d.image_url })
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 26)
    .attr("height", 26);

node.append("text")
    .attr("dx", function(d) { 
        if (d.image_url == "/profile.png"){
          return 100;
        }
        else{
          return 16;
        }
    })
    .attr("dy", function(d) { 
        if (d.image_url == "/profile.png"){
          return 100;
        }
        else{
          return ".35em";
        }
    })
    // .attr("dy", ".35em")
    .text(function(d) { return d.name });

force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

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


function getData() {
  return {
        "nodes":[
                {"name":"user1","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                {"name":"user2","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                {"name":"user3","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                {"name":"tag1","image_url":"","fill_color":"blue","text_color":"black"},
                {"name":"tag2","image_url":"","fill_color":"blue","text_color":"black"},
                {"name":"tag3","image_url":"","fill_color":"blue","text_color":"black"}
            ],
        "links":[
                {"source":"tag1","target":"user1","value":1,"line_color":"green"},
                {"source":"tag2","target":"user1","value":1,"line_color":"green"},
                {"source":"tag3","target":"user1","value":1,"line_color":"green"},
                {"source":"tag1","target":"user2","value":1,"line_color":"green"},
                {"source":"tag2","target":"user2","value":1,"line_color":"green"}
        ]
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>