json - d3 - "Cannot create property ' vx' 在号码 '65' 上”

Question

所以我试图利用这个伟大的例子 Force-Directed Graph对于一些非常简单的 json: https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json

我的工作在这里:codepen

我从 d3 收到永无休止的错误提要，一开始就没有错误，表明我的代码有问题。它是这样开始的:

XHR finished loading: GET "https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json".
[...]
d3.min.js:2 Uncaught Error: missing: 0
    at ar (d3.min.js:2)
    at r (d3.min.js:5)
    at Function.e.links (d3.min.js:5)
    at pen.js:46
    at Object.<anonymous> (d3.min.js:7)
    at d.call (d3.min.js:4)
    at XMLHttpRequest.e (d3.min.js:7)
ar @ d3.min.js:2
r @ d3.min.js:5
e.links @ d3.min.js:5
(anonymous) @ pen.js:46
(anonymous) @ d3.min.js:7
call @ d3.min.js:4
e @ d3.min.js:7
d3.min.js:5 Uncaught TypeError: Cannot create property 'vx' on number '66'
    at e (d3.min.js:5)
    at d3.min.js:5
    at Fe.each (d3.min.js:5)
    at e (d3.min.js:5)
    at n (d3.min.js:5)
    at yn (d3.min.js:2)
    at gn (d3.min.js:2)
e @ d3.min.js:5
(anonymous) @ d3.min.js:5
each @ d3.min.js:5
e @ d3.min.js:5
n @ d3.min.js:5
yn @ d3.min.js:2
gn @ d3.min.js:2
d3.min.js:5 Uncaught TypeError: Cannot create property 'vx' on number '66'
    at e (d3.min.js:5)
    at d3.min.js:5
    at Fe.each (d3.min.js:5)
    at e (d3.min.js:5)
    at n (d3.min.js:5)
    at yn (d3.min.js:2)
    at gn (d3.min.js:2)
e @ d3.min.js:5
(anonymous) @ d3.min.js:5
each @ d3.min.js:5
e @ d3.min.js:5
n @ d3.min.js:5
yn @ d3.min.js:2
gn @ d3.min.js:2

我实际上找不到关于 d3 v4+ 中的力图的良好介绍性资源，所以我必须破解它。

html

<main>
  <section class="d3">
  </section>
</main>

代码

const api = 'https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json' 

let root = d3.select(".d3"),
    width = +root.attr("width"),
    height = +root.attr("height")

let svg = root.append('svg')
    .attr("width", width)
    .attr("height", height)

let color = d3.scaleOrdinal(d3.schemeCategory20);

let simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id((d) => d.country))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json(api, function(error, graph) {
  if (error) 
    throw error

  let link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke-width",  () => 4);

  let node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", d => color(1))
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))

  simulation
    .nodes(graph.nodes)
    .on("tick", ticked)

  simulation.force("link")
    .links(graph.links)

  function ticked() {
    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
})

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

Answer 1

看看您的links数组:

[
    { "target": 66, "source": 0 },
    { "target": 3, "source": 1 },
    { "target": 100, "source": 2 },
    ...
]

现在看看您的 id 函数:

.id((d) => d.country)

如您所见，您的 links 数组中没有 country。

因此，由于您对链接使用数字索引，因此只需删除id() 函数即可。根据API:

If id is specified, sets the node id accessor to the specified function and returns this force. If id is not specified, returns the current node id accessor, which defaults to the numeric node.index

这是您的工作代码:

const api = 'https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json'

var width = 500,
  height = 500;

let svg = d3.select("body").append('svg')
  .attr("width", width)
  .attr("height", height)

let color = d3.scaleOrdinal(d3.schemeCategory20);

let simulation = d3.forceSimulation()
  .force("link", d3.forceLink())
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

d3.json(api, function(error, graph) {
  if (error)
    throw error

  let link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke", "black")
    .attr("stroke-width", 4);

  let node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", d => color(1))
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))

  simulation
    .nodes(graph.nodes)
    .on("tick", ticked)

  simulation.force("link")
    .links(graph.links)

  function ticked() {
    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("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      });
  }
})

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

<script src="https://d3js.org/d3.v4.min.js"></script>