D3.js D3：可以在D3中执行吗？

我想在图表D3上显示用户之间的电子邮件通信，使用图表FLARE或其他浏览器上JSON文件中的数据。 用户可以在图形上表示为节点，他们之间的电子邮件可以表示为链接。 如果有可能出现在D3中，并且有人知道这个问题的解决方案，请让我知道

下面是单个电子邮件的数据数组示例。 在其他表格中，更改电子邮件详细信息：用户名、标题、电子邮件、日期和时间

{
"metadataAsStrings": {
"doc-from": "User 1", 
"doc-sender": "User 1", 
"caat-derived-recipients": "User 2", 
"doc-subject": "Title Email 1" 
"doc-recipient": "User 2", 
"caat-normalized-author": "User 1", 
"caat-derived-email-action": "REPLY" 
"caat-derived-end-email": "true", 
"caat-derived-inclusive-email-reason": "MESSAGE" 
"doc-date": "2014/09/25 10:20:00", 
"doc-is", "User 2" 
} 
}

---

这是相当容易的部队布局。 以下是plnkr： 我实际做的是根据D3Force布局所需的结构创建json。 假设我有一些类似于您的数据，我会做一些分析：

{
  "edges": [
    {
      "source":"1", 
      "target": "2", 
      "color": "yellow", 
      "weight": "1.0",
      "doc-subject": "Title Email 1"
    },
    {
      "source":"2", 
      "target": "3", 
      "color": "blue", 
      "weight": "1.0",
      "doc-subject": "Title Email 2"
    }
    ],
  "nodes": [
    {
      "label":"user 1",
      "x":-1015.1223754882812,"y":679.421875,
      "id":"1","attributes":{},"color":"rgb(175,156,171)",
      "size":20
    },
    {
      "label":"user 2",
      "x":-915.1223754882812,"y":659.421875,
      "id":"2","attributes":{},"color":"rgb(175,156,171)",
      "size":15
    },
    {
      "label":"user 3",
      "x":-1015.1223754882812,"y":579.421875,
      "id":"3","attributes":{},"color":"rgb(175,156,171)",
      "size":15
    }
  ]
}

然后，在d3中，我有以下代码来解析它：

d3.json("graph.json", function(error, graphData) {
        //setup the data
        var graph = {};
        graph.nodes = [];
        graph.links = [];
        var test = [];

        // set the node data
        for (var nodeIndex in graphData.nodes){
            var curr_node = graphData.nodes[nodeIndex];
            graph.nodes[curr_node.id] = {
                x: curr_node.x, 
                y: curr_node.y,
                color: curr_node.color,
                size: curr_node.size,
                label: curr_node.label,
                id: curr_node.id

            };
            test.push(Number(curr_node.id));
        }
        // sort the IDs
        function sortNumber(a,b) {
            return a - b;
        }

        test.sort(sortNumber);

        // now go over each ID and set it in the 
        var tmpNodes = [];
        for (var index in test){
            tmpNodes.push(graph.nodes[test[index]]);
        }
        graph.nodes = tmpNodes;
        // now setup the edges/links
        for (edge in graphData.edges){
            var curr_link = graphData.edges[edge];
            graph.links.push({source: test.indexOf(Number(curr_link.source)), target: test.indexOf(Number(curr_link.target)), weight: 1.0});
        }
      force
          .nodes(graph.nodes)
          .links(graph.links)
          .start();

      link = link.data(graph.links)
        .enter().append("line")
          .attr("class", "link");

      node = node
        .data(graph.nodes)
        .enter().append("g")
        .attr("class", "node")

        .call(drag)
        .on("dblclick", dblclick)
        .on("mouseover", function(d){
            hover.html(d.id + ": " + d.label);
        })
        .on("mouseleave", function(d){
            hover.html("");
        })
            ;

     node.append("circle")
        .attr("r", function(d,i){
                return d.size/2;
            })
            .attr("fill", function(d,i){
                return d.color;
            })

            ;

      var textNode = node.append("g");


      var text = textNode.append("text")
          .attr("dx", 12)
          .attr("dy", ".35em")
          .attr("font-size", function(d){
            return 12+(d.size-1)/7+"px";
          })
          .text(function(d) { 
            return d.label });

      textNode.append("rect")
        .attr("x",function(d,i){
            var g = node[0][i].childNodes[1];
            return -g.getBBox().width;
        })
            .attr("y",function(d,i){
            var g = node[0][i].childNodes[1].childNodes[0];
            return -g.getBBox().height+10;
        })
        .attr("fill","white")
        .attr("fill-opacity",0.25)
        .attr("width",function(d,i){
            var g = node[0][i].childNodes[1];
            return g.getBBox().width;
        })
        .attr("height",function(d,i){
            var g = node[0][i].childNodes[1].childNodes[0];
            return g.getBBox().height;
        })      
        ;
    });

代码中发生了什么，d3得到了json，我对d3做了一点解析，以更好地进行数据设置（我这样做是为了添加更多的用户，并按他们的ID排序，而不是按他们在数组中的设置顺序排序），然后只给d3提供链接和节点以进行绘图

---

希望这能有所帮助。

这听起来完全可能。您只需要将数据处理成节点和链接表单。由于此数据集几乎肯定会有循环，因此最好的方法可能是强制布局，请参阅以获取介绍或评论。感谢您发送一个有趣的示例：）不幸的是，在我的示例中，我没有在JSON文件中定义用户之间的链接-我需要编写一个函数，根据“doc sender”和“doc recipient”并在图表上以节点的形式显示在用户之间的所有电子邮件。因此，您的问题不是d3问题，而是一个基本的javascript问题。如何解析一个对象以适应某种格式…以下是一个完整的代码，以您的数据集为例。很抱歉“粗鲁”“但是，下次你可以自己编写这些代码，这对你的js技能是一个很好的练习。