Question

我在网上搜索了一下，无法解决任何问题。

问题：我有复杂的数据来表示d3中的节点。基于节点值我将放置节点标签。在后端运行服务器以生成节点和链接并提供json。根据逻辑，节点名称将更改。每隔5秒，浏览器将进行Ajax调用并获取节点并链接json数据。当节点名称发生更改时，它不会根据新数据进行更新。

D3代码：

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

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}
.overlay {
  fill: none;
  pointer-events: all;
}


</style>
<body>
<p><h1>Topology View</h1>
<button id = "refresh" type="button" onclick="refresh()" >Refresh</button></p>
<script type="text/javascript" src="d3.min.js"></script>
<script>

var nodes ;
var links;
var width = window.innerWidth-30,
    height = window.innerHeight-140,
    root;
document.getElementById("refresh").disabled  = false;

var force = d3.layout.force()
    .linkDistance(100)
    .charge(-120)
    .gravity(.03)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .style("border", "1px solid black")
    .attr("height", height);

var link = svg.selectAll(".link"),
  node = svg.selectAll(".node");

d3.json("topoJson.json", function(error, json) {
  if (error) throw error;

  root = json;
  update();

});

function update() {
  nodes = root.nodes;
  links = root.links;

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

  // Update links.
  link = link.data(links, function(d) { return d.target.id; });

  link.exit().remove();

  link.enter().insert("line", ".node")
      .attr("class", "link");

  // Update nodes.
  node = node.data(nodes, function(d) { return d.id; });

  node.exit().remove();


  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  nodeEnter.append("circle")
            .attr("r", 20)
            .attr("id", function(d) { return d.id; });

  nodeEnter.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

  node.select("circle")
      .style("fill", color);
}

function tick() {
  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 color(d) {
  return d.type == 'S' ? "#c6dbef": "#fd8d3c";
 }

function refresh() {
d3.json("topoJson.json", function(error, json) {
  if (error) throw error;

  root = json;
  update();
console.log(root);
});
}
</script>

在刷新时，实际上数据必须来自服务器，但在这里我已经从文件中读取了数据。 json的变化没有反映出来。每次我点击刷新之前，我都会更改文件中的json。更改将是节点的名称。该名称应反映在d3节点文本中。我可以在console.log中看到更改，但不能在d3节点名称中看到。

topoJson.json

{
  "nodes": [
    {
      "type": "S",
      "id": "1",
      "name": "100"
    },
    {
      "type": "S",
      "id": "2",
      "name": "2"
    },
    {
      "type": "S",
      "id": "3",
      "name": "3"
    },
    {
      "type": "S",
      "id": "4",
      "name": "4"
    },
    {
      "type": "S",
      "id": "5",
      "name": "5"
    },
    {
      "type": "S",
      "id": "6",
      "name": "6"
    },
    {
      "type": "S",
      "id": "7",
      "name": "7"
    },
    {
      "type": "S",
      "id": "8",
      "name": "8"
    },
    {
      "type": "S",
      "id": "9",
      "name": "9"
    },
    {
      "type": "S",
      "id": "10",
      "name": "10"
    },
    {
      "id": "10.10.0.5",
      "name": "h5"
    },
    {
      "id": "10.10.0.3",
      "name": "h3"
    }
  ],
  "links": [
    {
      "source": 2,
      "target": 10
    },
    {
      "source": 2,
      "target": 11
    },
    {
      "source": 2,
      "target": 0
    },
    {
      "source": 3,
      "target": 5
    },
    {
      "source": 8,
      "target": 9
    },
    {
      "source": 5,
      "target": 6
    },
    {
      "source": 7,
      "target": 1
    },
    {
      "source": 1,
      "target": 3
    },
    {
      "source": 0,
      "target": 7
    },
    {
      "source": 6,
      "target": 8
    },
    {
      "source": 9,
      "target": 4
    }
  ]
}

我创造了一个小提琴。单击刷新以加载拓扑，然后单击更改以进行更改并单击增益刷新。

http://jsfiddle.net/pkolanda/hmob49p3/21/

基本上在改变中我正在更改名称。

请帮我解决问题。

Answer 1

您错过了更新选择。 enter()选择标识需要添加的DOM节点，exit()选择标识需要删除的DOM节点。你想要的（对于这个问题）是需要更新的DOM节点。这就是data()函数返回的内容。如果不深入挖掘代码，以下内容应该可以正常工作：

node = node.data(nodes, function(d) { return d.id; });

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

var nodeEnter = node.enter().append("g") // ...

d3复杂数据，更新现有节点

1 个答案: