Can't get d3js to load properly/display

Question

I can't get the circle or any d3js stuff to work in general. I tired using JSbin.com and also running on Chrome and Firefox, did I do something wrong?

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <script src="https://d3js.org/d3.v3.min.js"></script>

</head>



<body>

  <p>hello</p>

  <script> 

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

    var circle = canvas.append("circle").attr("cx" 250).attr("cy" 250).attr("r" 50).attr("fill", red);



  </script>

</body>
</html>

Answer 1

You need to use commas , when you're setting attributes between the attribute and value just like you did when you declared the width and height of your svg .
For fill, you need to put red inside quotation marks.

This snippet below should work.

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

var circle = canvas.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 50)
  .attr("fill", 'red');

JSFIddle - https://jsfiddle.net/3vhudt35/

Can't get d3js to load properly/display

Question

1 answers

solution1
1 ACCPTED 2017-03-27 22:43:09

Can't get d3js to load properly/display

Question

1 answers

solution1 1 ACCPTED 2017-03-27 22:43:09

solution1
1 ACCPTED 2017-03-27 22:43:09