javascript - 在 D3 图形中为 svg 图像添加边框

Question

我使用 D3 Javascript 库创建了一个图表。它是一个以图像为节点的有向图。我一直在尝试在我的图像节点周围添加一个粗边框，但没有成功。

这是我的带有嵌入式 d3 JS 脚本的 html:

var json = {
  "nodes": [
    {"x": 50, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 150, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 250, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 350, "y": 150, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 450, "y": 150, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 50, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 150, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 250, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"}
  ],
  "links": [
    {"source":  0, "target":  1},
    {"source":  1, "target":  2},
    {"source":  2, "target":  3},
    {"source":  3, "target":  4},
    {"source":  5, "target":  6},
    {"source":  6, "target":  7},
    {"source":  7, "target":  3}
  ]
};

  // setting up the canvas size :)
  var width = 900,
    height = 500;

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

  // build the arrow.
  svg.append("svg:defs").selectAll("marker")
  .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
  .attr("id", String)
  .attr("viewBox", "0 -5 15 15")
  .attr("refX", 12)
  .attr("refY", 0)
  .attr("markerWidth", 25)
  .attr("markerHeight", 25)
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");

  var force = d3.layout.force()
  .gravity(0) // atom's cohesiveness / elasticity of imgs :)
  .charge(-50) // meta state transition excitement
  .linkDistance(140)
  .size([width, height]); // degree of freedom to the canvas

  // exception handling
  // d3.json("graph.json", function(error, json) {
  //   if (error) throw error;

    // Restart the force layout
    force
    .nodes(json.nodes)
    .links(json.links)
    .start();

    // Build the link
    var link = svg.selectAll(".links")
    .data(json.links)
    .enter().append("line")
    .attr("class", "link")
    .attr("marker-end", "url(#end)"); // add the arrow with and identify it wiht the tag "end" :)

    var node = svg.selectAll(".nodes")
    .data(json.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

    // Append custom images
    node.append("svg:image")
      .attr("xlink:href",  function(d) { return d.img;}) // update the node with the image
      .attr("x", function(d) { return -5;}) // how far is the image from the link??
      .attr("y", function(d) { return -19;}) // --- same ---
      .attr("height", 35) // size
      .attr("width", 35)
      .style("stroke", "red") //------ DOESNT WORK
      .style("fill", "auto") //------ DOESNT WORK
      .style("stroke-width", 5) //------ DOESNT WORK
    ;

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

      force.stop();
    });

  // });

.link {
  stroke: black;
}
.node text {
  pointer-events: none;
   font: 10px sans-serif;
}
.node:not(:hover) .nodetext {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
</body>
</html>

我正在尝试为我的图像节点添加边框。我正在使用

.style("stroke", "red") 
.style("fill", "auto") 
.style("stroke-width", 5)

在我的节点上，但它似乎不起作用。请帮助我知道我哪里出错了。

Answer 1

我不认为你可以玩 svg 图像的边框，但如果你所有的图像都是圆圈，那么你可以选择为每个节点附加一个圆圈来模拟图像的边界:

node.append("circle")
  .attr("cx", 12.5)
  .attr("cy", 0)
  .attr("r", 17.5)
  .style("fill", "transparent")
  .style("stroke", "black")
  .style("stroke-width", "2px");

var json = {
  "nodes": [
    {"x": 50, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 150, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 250, "y": 50, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 350, "y": 150, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 450, "y": 150, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 50, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 150, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn1.iconfinder.com/data/icons/flat-round-system/512/android-128.png"},
    {"x": 250, "y": 250, "label": "lol", "todoinfo": "Info here", "img": "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png"}
  ],
  "links": [
    {"source":  0, "target":  1},
    {"source":  1, "target":  2},
    {"source":  2, "target":  3},
    {"source":  3, "target":  4},
    {"source":  5, "target":  6},
    {"source":  6, "target":  7},
    {"source":  7, "target":  3}
  ]
};

  // setting up the canvas size :)
  var width = 900,
    height = 500;

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

  // build the arrow.
  svg.append("svg:defs").selectAll("marker")
  .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
  .attr("id", String)
  .attr("viewBox", "0 -5 15 15")
  .attr("refX", 12)
  .attr("refY", 0)
  .attr("markerWidth", 25)
  .attr("markerHeight", 25)
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");

  var force = d3.layout.force()
  .gravity(0) // atom's cohesiveness / elasticity of imgs :)
  .charge(-50) // meta state transition excitement
  .linkDistance(140)
  .size([width, height]); // degree of freedom to the canvas

  // exception handling
  // d3.json("graph.json", function(error, json) {
  //   if (error) throw error;

    // Restart the force layout
    force
    .nodes(json.nodes)
    .links(json.links)
    .start();

    // Build the link
    var link = svg.selectAll(".links")
    .data(json.links)
    .enter().append("line")
    .attr("class", "link")
    .attr("marker-end", "url(#end)"); // add the arrow with and identify it wiht the tag "end" :)

    var node = svg.selectAll(".nodes")
    .data(json.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

    // Append custom images
    node.append("svg:image")
      .attr("xlink:href",  function(d) { return d.img;}) // update the node with the image
      .attr("x", function(d) { return -5;}) // how far is the image from the link??
      .attr("y", function(d) { return -19;}) // --- same ---
      .attr("height", 35) // size
      .attr("width", 35)
      .style("stroke", "red") //------ DOESNT WORK
      .style("fill", "auto") //------ DOESNT WORK
      .style("stroke-width", 5) //------ DOESNT WORK
    ;

    node.append("circle")
      .attr("cx", 12.5)
      .attr("cy", 0)
      .attr("r", 17.5)
      .style("fill", "transparent")
      .style("stroke", "black")
      .style("stroke-width", "2px");

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

      force.stop();
    });

  // });

.link {
  stroke: black;
}
.node text {
  pointer-events: none;
   font: 10px sans-serif;
}
.node:not(:hover) .nodetext {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
</body>
</html>