d3復雜數據，針對現有節點進行更新

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>

在Refresh上，實際上數據必須來自服務器，但是在這里，我已使其從文件中讀取。 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 個解決方案

解決方案1
3 已采納 2015-10-04 17:24:14

d3復雜數據，針對現有節點進行更新

問題描述

1 個解決方案

解決方案1 3 已采納 2015-10-04 17:24:14

解決方案1
3 已采納 2015-10-04 17:24:14