CODEWITHSUNDEEP
javascriptd3.jssvg
user6530263
user6530263

Reputation:

Uncaught type error on d3.js

I am a beginner at d3.js, and am trying to recreate this: https://bl.ocks.org/mbostock/4062045 with the node and link data in the html file. I have this so far:

  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.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

    var link = svg.append("svg:g")
        .attr("class", "links")
      .selectAll("line")
      .data(links)
      .enter().append("line")
        .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

    var node = svg.append("svg:g")
        .attr("class", "nodes")
      .selectAll("circle")
      .data(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(nodes)
        .on("tick", ticked);

    simulation.force("link")
        .links(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;
  }

however i get the error index.html:35 Uncaught TypeError: svg.append(...).attr(...).selectAll(...).data(...).enter is not a function. Why is this?

Thanks so much

Upvotes: 1

Views: 3733

Answers (1)

rby
rby

Reputation: 786

I have recreated it for you here: https://jsfiddle.net/wpc3y1jd/

Basically, some things to watch out for would be 1) make sure you have v4 of D3, 2) define your svg before you use it in your code and make sure you set the width and height since you are pulling these at the beginning of your code, something like:

<svg width="500" height="500"></svg>

and finally make sure you are referencing nodes and links correctly throughout your code.

Upvotes: 3

Related Questions