Uncaught TypeError: Cannot create property 'vx' on string '5994'

639 views
Skip to first unread message

Giuseppe Joe Ramundo

unread,
Apr 5, 2020, 5:29:13 PM4/5/20
to d3-js
Hi, I have a csv file of this kind

node_1,node_2,amount,date
1,5994,8.94,2011-07-04-09-05-56
905914,20572,0.01,2011-06-23-19-10-01.

I'm trying to make a network out of it but i keep getting this error

This is my javascript code.

<script>
  var svg = d3.select("svg"),
             width = +svg.attr("width"),
             height = +svg.attr("height");

            var simulation = d3
             .forceSimulation()
             .force("charge", d3.forceManyBody().strength(-200))
             .force(
               "link",
               d3
                 .forceLink()
                 .id(function (d) {
                   return d.node_1;
                 })
                 .distance(40)
             )
             .force("x", d3.forceX(width / 2))
             .force("y", d3.forceY(height / 2))
             .on("tick", ticked);

            var link = svg.selectAll(".link"),
             node = svg.selectAll(".node");

            d3.csv("node.csv").then(function (data) {
             graph = { nodes: [], links: [] };
             data.forEach(function (d) {
               graph.nodes.push({ node_1: d.node_1 });
               graph.nodes.push({ node_2: d.node_2 });
               graph.links.push({
                 source: d.node_1,
                 target: d.node_2,
                 value: +d.amount,
               });
             });

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

              node = node
               .data(graph.nodes)
               .enter()
               .append("circle")
               .attr("class", "node")
               .attr("r", 6)
               .style("fill", function (d) {
                 return d.node_1;
               });
           });
           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;
               });
           }

Could you help me find out what it 's wrong with it? I'm fairly new to d3 and javascript in general :)
Thank you for your time

Ehsan Ghafar langarudi

unread,
Jun 1, 2022, 1:41:47 AM6/1/22
to d3-js
Hi
I tried this and solved my problem
Reply all
Reply to author
Forward
0 new messages