Databases
StackOverflow2013
Postsdbo
POd3.js, network visualization
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POd3.js, network visualization
    primarykey
    data
    text
    <p>As a beginner in d3.js, I've met a problem in network visualization. I was trying to fix it in many ways, but nothing works well unfortunately. So I really need an advice, would be happy if someone can help me. I'm getting an error in d3.v3.js:5624:</p> <blockquote> <p>Uncaught TypeError: Cannot read property 'weight' of undefined</p> </blockquote> <p>My json is generating in the controller and looks like this:</p> <pre><code>{ "nodes" : [{ "Name" : "One", "Weight" : 903 }, { "Name" : "Two", "Weight" : 502 }, ... ], "links" : [{ "Source" : "One", "Target" : "Two", "Volume" : 2 }, { "Source" : "Two", "Target" : "Five", "Volume" : 1 }, ... ] } </code></pre> <p>So I'm calling</p> <pre><code>return Json(network, JsonRequestBehavior.AllowGet); </code></pre> <p>The class Network:</p> <pre><code>public class Network { public List&lt;NetworkNodes&gt; nodes {get; set;} public List&lt;NetworkLinks&gt; links{ get; set;} public Network(List&lt;NetworkNodes&gt; a, List&lt;NetworkLinks&gt; b) { nodes = a; links = b; } } </code></pre> <p>And script by itself:</p> <pre><code>$(document).ready(function () { var width = 1500, height = 1500; var force = d3.layout.force() .charge(-100) .linkDistance(30) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); $.getJSON('@Url.Action("BuildNetwork", "Query")', function (graph) { // Compute the distinct nodes from the links. force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function (d) { return Math.sqrt(d.Value); }); var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .call(force.drag); node.append("title") .text(function (d) { return d.Name; }); 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; }); }); }); }); </code></pre> <p>I know, there is some stupid mistake I have made, but I'm too stupid to understand where :(</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStereško
    1. USGalina Bezobrazova
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COwhat does `@Url.Action("BuildNetwork", "Query")` return? afaik, `$.getJSON` takes an URL to a file with the JSON... not sure if you can use it like that. Also, your error reports a `weight` value, where in your JSON, you have a `Weight` value... notice the case of the first letter...
      singulars
      1. POd3.js, network visualization
      1. USJoum
    2. COCould it be that in the json Weight has a capital W but the error shown has a lowercase ?
      singulars
      1. POd3.js, network visualization
      1. USBentOnCoding
    3. COI was trying all possible corrections, with "weight" as well. Unfortunately the problem is still here :(
      singulars
      1. POd3.js, network visualization
      1. USGalina Bezobrazova
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload