Question

我正在尝试创建一个Chrome扩展程序，用于映射用户的导航，然后创建一个包含数据的强制导向图。

在我的content.js中，每次页面刷新时都会收集数据。在background.js中，我以下面显示的格式创建一个JSON对象。在popup.js中，我想创建图表。

名为convertedInfo的 JSON对象如下所示：

{
  "nodes":[
    {"index":[value],"anchor":[value], "url":[value]},
    {"index":[value],"anchor":[value], "url":[value]}
  ],
  "links":[
    {"source":[value],"target":[value]},
    {"source":[value],"target":[value]}
  ]
}

扩展程序中使用的清单文件如下所示。

{
    "manifest_version": 2,

    "name": "Navigation Visualisation",
    "version": "1.0",
    "description": "Create a visualisation of your web navigation actions.",


    "browser_action":
      {
          "default_icon": "icon.png",
          "default_popup" : "popup.html",
          "default_title" : "Navigation Visualisation"
      },

     "background":
     {
        "scripts": ["jquery.js", "background.js"],
        "persistent": false
     },

    "content_scripts":
      [
          {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["jquery.js","content.js"]

          }
      ],

    "permissions":
      [
        "activeTab", "storage"
      ]

}

content.js具有以下代码行，可在每次刷新页面时发送：

chrome.runtime.sendMessage({'method':'setInfo'});

popup.html如下所示：

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>

<title> Navigation Visualisation</title>
<body>
<script src="jquery.js"></script>
<script src="d3.min.js"></script>
<script src="popup.js"></script>

<div id="container">  </div>

D3.js中popup.js图表布局的代码是：

$(document).ready(function(){ 

  var convertedInfo = {};
  var count = 0;

  convertedInfo.nodes = [];
  convertedInfo.links = [];


  //listen for messages from content.js to update the data
  chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){

 if(message.method == 'setInfo')
 {
   convertedInfo.nodes.push({'index': count, 'anchor': count});
   if(count > 0)
   {
     convertedInfo.links.push({'source': count-1, 'target': count});
   }
   count++;

   runVisualisation();
 } 

});  

function runVisualisation()
  {
        d3.selectAll("svg").remove();
        var width = 500,
            height = 500;

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        var force = d3.layout.force()
            .charge(-20)
            .linkDistance(10)
            .size([width, height])
            .nodes(convertedInfo.nodes)
            .links(convertedInfo.links)
            .start();


        var node = svg.selectAll("node")
          .data(convertedInfo.nodes)
          .enter()
          .append("circle")
          .attr("r", 7)
          .attr("class", "node");

          //Adding links and data
        var link = svg.selectAll("link")
          .data(convertedInfo.links)
          .enter()
          .append("line")
          .attr("stroke-width", 3)
          .attr("class", "link")
          .attr("stroke", "grey");

        force.on("tick", function() {
          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; });
        });
  }

});

我的图表正在显示，但不正确。其中一个节点总是隐藏在svg区域之外，我在控制台中收到数千个错误，说明如下：

Error: Invalid value for <line> attribute x1="NaN" d3.min.js:1
Error: Invalid value for <line> attribute y1="NaN" d3.min.js:1
Error: Invalid value for <line> attribute x2="NaN" d3.min.js:1
Error: Invalid value for <line> attribute y2="NaN" d3.min.js:1
Error: Invalid value for <circle> attribute cx="NaN" d3.min.js:1
Error: Invalid value for <circle> attribute cy="NaN" d3.min.js:1

但是当我输出JSON对象时，我可以清楚地看到已经自动添加的所有x，y，weight等属性，据我所见，一点都不奇怪。

请帮我解决这个问题。

Chrome扩展程序：D3.js强制导向的图形布局错误

0 个答案: