d3.js select 个节点并改变它们的样式

Question

我有包含节点和链接的代码，显示了节点的链接图..

d3sparql.graph = function(json, config) {
  var head = json.head.vars
  var data = json.results.bindings

  var opts = {
    "key1":   config.key1   || head[0] || "key1",
    "key2":   config.key2   || head[1] || "key2",
    "label1": config.label1 || head[2] || false,  // optional
    "label2": config.label2 || head[3] || false,  // optional
  }
  var graph = {
    "nodes": [],
    "links": []
  }
  var check = d3.map()
  var index = 0
  for (var i = 0; i < data.length; i++) {
    var key1 = data[i][opts.key1].value
    var key2 = data[i][opts.key2].value
    var label1 = opts.label1 ? data[i][opts.label1].value : key1
    var label2 = opts.label2 ? data[i][opts.label2].value : key2
    if (!check.has(key1)) {
      graph.nodes.push({"key": key1, "label": label1})
      check.set(key1, index)
      index++
    }
    if (!check.has(key2)) {
      graph.nodes.push({"key": key2, "label": label2})
      check.set(key2, index)
      index++
    }
    graph.links.push({"source": check.get(key1), "target": check.get(key2)})
  }
  return graph
}

我想实现的是修改节点的样式（颜色和大小..）

我试图在 return graph

之前插入这个

d3.selectAll(graph.nodes).style("fill", "black");
d3.selectAll(graph.nodes).attr("r", 30);

哪个不起作用..我做错了什么？

Answer 1

您不能通过 D3 中的数据 select 元素。 .selectAll() 取 CSS selector 到 select 中的 DOM 个元素。因此，您必须 select 之前添加的 name/class 代表该数据的元素。

d3.js select 个节点并改变它们的样式

d3.js select nodes and change their style

d3.js