Question

所以昨天我问a question，答案给了我一些有用的见解，了解d3的功能有多强大。

但是当我试图自己应用它时，它产生了奇怪的结果。我试图用各种图标替换patent suits示例的圆圈，但即使console.log显示该函数正确接收所有图像的路径和名称，它最终只有一个图标对于所有节点。除此之外，当我只有六个节点时，我很惊讶地看到这么多的console.log输出 enter image description here
代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
  opacity: 0.5;
}

#linkup {
  fill: green;
}

.link.linkup {
  stroke: green;
}

.link.unknownlink {
  stroke-dasharray: 0,2 1;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

</style>
<body>
<script src="d3/d3.v3.min.js"></script>
<script>

var links = [
  {source: "Device1",  target: "Device20", type: "linkup", icon: "images/workstation.jpg"},
  {source: "Device1",  target: "Device5",  type: "linkup", icon: "images/router.jpg"},
  {source: "Device2",  target: "Device8",  type: "linkdown", icon: "images/workstation.jpg"},
  {source: "Device3",  target: "Device8",  type: "linkdown", icon: "images/workstation.jpg"}
];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var width = 960, height = 500;

var force = d3.layout.force()
    .nodes(d3.values(nodes))//prolly giving values to the nodes
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

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

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
    .data(["linkdown", "linkup", "unknownlink"])
    .enter().append("marker")//arrowmarker type of markers
    .attr("id", function(d) { return d; })
    .attr("viewBox", "0 -5 10 10")//the viewing area for every marker I guess...
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,-5L10,0L0,5");//this is for the arrow

var path = svg.append("g").selectAll("path")
    .data(force.links())//console.log(force.links());//outputs [Object { source={...}, target={...}, type="linkup"}, Object { source={...}, target={...}, type="linkup"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="unknownlink"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="unknownlink"}, Object { source={...}, target={...}, type="unknownlink"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="unknownlink"}, Object { source={...}, target={...}, type="unknownlink"}, Object { source={...}, target={...}, type="unknownlink"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="unknownlink"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}, Object { source={...}, target={...}, type="linkdown"}]
    .enter().append("path")//add a standard svg path
    .attr("class", function(d) { return "link " + d.type; })//this is where the linestyle is applied
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });//this is where the arrow end style is applied

var circle = svg.append("g").selectAll("path")
    .data(force.nodes())
    .enter().append("g")
    .call(force.drag); //assigning the capability of dragging the circle

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter().append("text") //adding the svg text element
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function(d) { return d.name; }); //getting the name from nodes which was assigned to force

circle.selectAll("image")
    .data(links)
    .enter()
    .append("image")
    .attr("xlink:href", function(d) {console.log(d.icon);return d.icon;})
    //.attr("xlink:href", "images/workstation.jpg")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

circle.on("mousedown", function(d) { d.fixed = true; });//make the node sticky
circle.on("dblclick", function(d) { d.fixed = false; });//make the node un-sticky

// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
  path.attr("d", linkArc);
  circle.attr("transform", transform);
  text.attr("transform", transform);
}

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
function transform(d) { return "translate(" + d.x + "," + d.y + ")"; }
</script>

我的问题： ...不仅仅是.attr("xlink:href", function(d) {console.log(d.icon);return d.icon;}我做错了什么。我的问题是，我想要正确理解这种选择是如何工作的。 selectAll("text")和.enter().append("text")如何能够附加每个单独的文本，但我的图片附件无法正常工作？这些data()，enter()和selectAll()函数究竟如何设法单独选择对象实例并将属性应用于它们？

Answer 1

您看到的消息多于您期望的消息，而不是正确的图像，因为您实际上添加的元素比您想象的要多得多。代码的关键部分是：

var circle = svg.append("g").selectAll("path")
  .data(force.nodes())
  .enter().append("g")

circle.selectAll("image")
  .data(links)
  .enter()
  .append("image")

在第一个代码块之后，circles包含一个包含所有新附加的g元素的选择 - 即每个节点一个。通过对此选择执行.selectAll(...).data(...)，您将为选择中的每个元素创建nested selection - ，您正在选择后代元素和绑定数据。因此，对于每个g元素，您将数据绑定到其所有后代image元素。子选择是原始选择的每个元素，而不是整个原始选择。

因此，您要为每个g元素添加links.length image元素。这是因为您将links绑定为数据。因此，所有g元素具有相同顺序的相同image元素（因为相同的数据绑定到每个元素），但只有第一个元素显示在SVG中。

为了解决这个问题，我做了两件事。首先，由于图像是针对节点而不是链接，我修改了您的代码，以便稍微从链接生成节点，以包含要在节点中使用的图标的信息。

要实际附加图像，您不需要其他选择，以下代码可以执行此操作。

circle.append("image") .attr("xlink:href", function(d) {console.log(d.icon);return d.icon;})

这告诉D3将新的image元素附加到当前选择中的每个元素（即新的g元素）。

d3.js：想要了解通过单个命令将单个属性应用于元素的概念

1 个答案: