Need Help!!! Can someone please help me to resolve TypeError

Handa Rajat

unread,

Nov 22, 2016, 10:55:02 AM11/22/16

to d3-js

I am trying to do network Analysis with d3.js. My json object to pass to d3 to make force layout has proper format but I get following error:
TypeError: e[u.source.index] is undefined
...++a)e[a]=[];for(a=0;s>a;++a){var u=M[a]; e[u.source.index].push(u.target),e[u.tar...

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}
.node circle {
  fill: steelblue;
  stroke: #fff;
  stroke-width: 1.5px;
}
.node text {
  pointer-events: none;
  font: 10px sans-serif;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 1100,
    height = 800
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var force = d3.layout.force()
    .gravity(.05)
    .distance(150)
    .charge(-100)
    .size([width, height]);
d3.json("newJson.json", function(error, json) {
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();
  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");
  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);
  node.append("circle")
    .attr("r", 6);

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });
});
</script>

In My Json the links source and target are string. Link to JSON File:--https://spaces.hightail.com/space/4hFTj

Tito

unread,

Nov 22, 2016, 6:46:53 PM11/22/16

to d3-js

try this

<!DOCTYPE html>

<style>

.links line {

stroke: #999;

stroke-opacity: 0.6;

}

.nodes circle {

stroke: #fff;

stroke-width: 1.5px;

}

</style>

var svg = d3.select("svg"),

width = +svg.attr("width"),

height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()

.force("link", d3.forceLink().id(function(d) { return d.name; }))

.force("charge", d3.forceManyBody())

.force("center", d3.forceCenter(width / 2, height / 2));

d3.json("../sample/newJson.json", function(error, graph) {

if (error) throw error;

var link = svg.append("g")

.attr("class", "links")

.selectAll("line")

.data(graph.links)

.enter().append("line")

.attr("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.append("g")

.attr("class", "nodes")

.selectAll("circle")

.data(graph.nodes)

.enter().append("circle")

.attr("r", 5)

.attr("fill", function(d) { return color(d.group); })

.call(d3.drag()

.on("start", dragstarted)

.on("drag", dragged)

.on("end", dragended));

node.append("title")

.text(function(d) { return d.id; });

simulation

.nodes(graph.nodes)

.on("tick", ticked);

simulation.force("link")

.links(graph.links);

function ticked() {

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; });

}

});

function dragstarted(d) {

if (!d3.event.active) simulation.alphaTarget(0.3).restart();

d.fx = d.x;

d.fy = d.y;

}

function dragged(d) {

d.fx = d3.event.x;

d.fy = d3.event.y;

}

function dragended(d) {

if (!d3.event.active) simulation.alphaTarget(0);

d.fx = null;

d.fy = null;

}

</script>

Handa Rajat

unread,

Nov 22, 2016, 9:43:55 PM11/22/16

to d3-js

Thank You Very Much!!!

Tito

unread,

Nov 22, 2016, 10:19:55 PM11/22/16

to d3-js

does it work boss?

On Tuesday, November 22, 2016 at 6:43:55 PM UTC-8, Handa Rajat wrote:

Thank You Very Much!!!

Handa Rajat

unread,

Nov 22, 2016, 11:41:50 PM11/22/16

to d3-js

Yes Sir its working. I am now moving towards next step which is adding node labels and zoom function. I am currently beginner in d3.js.

1.Can you tell me how we can add label to circles?
2.how we can fit the whole network in the svg as its spreading out and unable to scroll/zoom the network?

Reply all

Reply to author

Forward