javascript - 如何使用 d3 将 json 渲染为网络图

Question

这就是我的数据的样子

 "nodes": [
        {
            "name": "sender"
        },
        {
            "name": "0"
        },
        {
            "name": "1"
        },
        {
            "name": "2"
        },
        {
            "name": "3"
        },
        {
            "name": "4"
        },
        {
            "name": "5"
        },
        {
            "name": "6"
        },
        {
            "name": "7"
        },
        {
            "name": "8"
        },
        {
            "name": "9"
        },
        {
            "name": "10"
        },
        {
            "name": "11"
        },
        {
            "name": "12"
        },
        {
            "name": "13"
        },
        {
            "name": "14"
        },
        {
            "name": "15"
        },
        {
            "name": "16"
        },
        {
            "name": "17"
        },
        {
            "name": "18"
        },
        {
            "name": "19"
        },
        {
            "name": "20"
        },
        {
            "name": "21"
        },
        {
            "name": "22"
        },
        {
            "name": "23"
        },
        {
            "name": "24"
        },
        {
            "name": "25"
        },
        {
            "name": "26"
        },
        {
            "name": "27"
        },
        {
            "name": "28"
        },
        {
            "name": "29"
        },
        {
            "name": "[16]"
        }
    ],
    "links": [
        {
            "source": "sender",
            "target": "[16]"
        }
    ]
}

我需要使用 d3 在屏幕上渲染这些。这就是我的代码的样子：

function drawChart(data) {
    // set the dimensions and margins of the graph
    // set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
  width = 400 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");



  // Initialize the links
  var link = svg
    .selectAll("line")
    .data(data.links)
    .enter()
    .append("line")
      .style("stroke", "#aaa")

  // Initialize the nodes
  var node = svg
    .selectAll("circle")
    .data(data.nodes)
    .enter()
    .append("circle")
      .attr("r", 20)
      .style("fill", "#69b3a2")



  // Let's list the force we wanna apply on the network
  var simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
      .force("link", d3.forceLink()                               // This force provides links between nodes
            .id(function(d) { return d.id; })                     // This provide  the id of a node
            .links(data.links)                                    // and this the list of links
      )
      .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
      .force("center", d3.forceCenter(width / 2, height / 2))     // This force attracts nodes to the center of the svg area
      .on("end", ticked);




}

根据其中一个答案，我们需要创建一个层次结构，以便 d3 将其呈现为图形，但我不知道如何合并它。这是我第一次与 D3 合作，因此任何潜在客户都会有所帮助

标签： javascriptjsond3.js