遍歷JS中的JSON結構

Question

我需要設置一些圓的半徑，我有以下數據，由鏈接和節點組成。 我需要將圓（節點）的半徑設置為連接到節點的鏈接的總和

var data = {
    "nodes": [
        {
            "id": "s1",
            "val": 12
        },
        {
            "id": "s2",
            "val": 12
        },
        {
            "id": "s3",
            "val": 12
        },
        {
            "id": "s4",
            "val": 12
        },
        {
            "id": "s5",
            "val": 12
        },
        {
            "id": "s6",
            "val": 12
        }
    ],
    "Links": [
        {
            "n1": "s1",
            "n2": "s2",
            "amount": 10
        },
        {
            "n1": "s2",
            "n2": "s3",
            "amount": 10
        },
        {
            "n1": "s2",
            "n2": "s4",
            "amount": 10
        },
        {
            "n1": "s2",
            "n2": "s6",
            "amount": 10
        },
        {
            "n1": "s3",
            "n2": "s1",
            "amount": 10
        },
        {
            "n1": "s4",
            "n2": "s5",
            "amount": 10
        },
        {
            "n1": "s5",
            "n2": "s6",
            "amount": 10
        }
    ]
};

即（我希望節點此時處於上下文中），我在下面編寫了一些偽代碼

val1 = 0
val2 = 0 
for i to len.links
  if (links.node1 = nodes.id)
    val1 = val1 + links.amount
  else if (links.node02 = nodes.id)
    val2 = val2 + links.amount
next
sum = val1 + val2

下面的代碼將圓圈顯示在屏幕上，我嘗試了各種方法，但可以緩解我所說的死亡白屏

  var w = 1200;
  var h = 800;
  var svg = d3.select("body").append("svg").attr("width",w).attr("height", h);
      var lines = svg.attr("class", "line")
  d3.json("data.json", function(error, data) {
        console.log(data);

        var circles = svg.selectAll("foo")
  .data(data.nodes)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", 20); // <- i want to put this calculation here

我是JS新手，不知道如何將其轉換為Javascript

Answer 1

我覺得這樣會花很長時間來解釋而不輸入它，因為d3可能會造成混淆，而且js本身也很容易…… 我在jsbin中一起破解了這個，並添加了一些注釋。 您應該能夠逐行跟蹤並找出發生了什么情況。 如果您不了解或發表評論，請使用Google語法，我們會盡力幫助您進行推理。

jsbin與工作示例

const data = {
  "nodes": [
      {
          "id": "s1",
          "val": 12
      },
      {
          "id": "s2",
          "val": 12
      },
      {
          "id": "s3",
          "val": 12
      },
      {
          "id": "s4",
          "val": 12
      },
      {
          "id": "s5",
          "val": 12
      },
      {
          "id": "s6",
          "val": 12
      }
  ],
  "links": [
      {
          "n1": "s1",
          "n2": "s2",
          "amount": 10
      },
      {
          "n1": "s2",
          "n2": "s3",
          "amount": 10
      },
      {
          "n1": "s2",
          "n2": "s4",
          "amount": 10
      },
      {
          "n1": "s2",
          "n2": "s6",
          "amount": 10
      },
      {
          "n1": "s3",
          "n2": "s1",
          "amount": 10
      },
      {
          "n1": "s4",
          "n2": "s5",
          "amount": 10
      },
      {
          "n1": "s5",
          "n2": "s6",
          "amount": 10
      }
  ]
};


const width = window.innerWidth;
const height = window.innerHeight;
//set up the svg container
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', 'lightgray'); // just to see the outline

//update our data to have referable x, y positions for each node
data.nodes.forEach(n => { 
  n.x = Math.random()*width; //since I don't know how you want them arranged...
  n.y = Math.random()*height;//...i'm setting them randomly
})

//draw the lines
//each line has an x1,y1 and an x2,y2
//again not sure how you wanted them connected...
//so just doing the obvious based on the link info
const lines = svg.selectAll('line')
.data(data.links)
.enter()
.append('line')
.attr('stroke', 'black')
.attr('x1', l => {
  let node = data.nodes.filter(n => n.id === l.n1)[0];
  return node.x;
})
.attr('y1', l => {
  let node = data.nodes.filter(n => n.id === l.n1)[0];
  return node.y;
})
.attr('x2', l => {
  let node = data.nodes.filter(n => n.id === l.n2)[0];
  return node.x;
})
.attr('y2', l => {
  let node = data.nodes.filter(n => n.id === l.n2)[0];
  return node.y;
})
//draw the circles
const circles = svg.selectAll('circle')
.data(data.nodes)
.enter()
.append('circle')
// basically just random colors
.attr('fill', () => d3.color('#'+Math.floor(Math.random() * Math.pow(2,32) ^ 0xffffff).toString(16).substr(-6)))
.attr('cx', n => n.x)
.attr('cy', n => n.y)
.attr('r', n => {
  //for each node, first i find all the links that contain...
  //either n1 or n2 that matches the node's id
  let rels = data.links.filter(l => n.id === l.n1 || n.id === l.n2);
  //just google the reduce fn... it'll be easier...
  let sum = rels.reduce((a,b) => a + b.amount,0);
  return sum;
});
//add labels so we know whats what
const labels = svg.selectAll('text')
.data(data.nodes)
.enter()
.append('text')
.attr('x', n => n.x)
.attr('y', n => n.y)
.attr('text-anchor', 'middle') //horizontal align
.attr('alignment-baseline', 'central') //vertical align
.text(n => n.id)

嘗試更新鏈接中的金額以查看動態更新/調整大小！