Peterson Peterson - 28 days ago 17
Javascript Question

Creating line chart with d3 getting error

In the following example I am using a lineFunction for plotting co-ordinates for the path. I hope to enter code correctly, still facing error. Can someone help?

SNIPPET:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script>

$(document).ready(function(){

//our basic data
var customData = [
{"x": 100, "y": 100},
{"x": 200, "y": 50},
{"x": 300, "y": 150},
{"x": 400, "y": 20}
];

//the line function for path
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");

//Main svg container
var mySVG = d3.select("svg");

//defining the lines
var path = mySVG.append("path");

//plotting lines
path
.attr("d", lineFunction(customData))
.attr("stroke",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; })
.attr("stroke-width", 2)
.attr("fill", "none");
});
</script>
</head>

<body>
<svg width="500px" height="500px"></svg>
</body>
</html>


ERROR:

enter image description here

var lineFunction = d3.svg.line() //error here ...

Answer

Looks like versioning issue for me take look at this -

$(document).ready(function(){

    //our basic data 
     var customData = [
        {"x": 100, "y": 100},
        {"x": 200, "y": 50},
        {"x": 300, "y": 150},
        {"x": 400, "y": 20}
     ];

    //the line function for path 
    var lineFunction = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .interpolate("linear");

    //Main svg container
    var mySVG = d3.select("svg");

    //defining the lines
    var path = mySVG.append("path");

    //plotting lines
    path
        .attr("d", lineFunction(customData))
        .attr("stroke",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; })
        .attr("stroke-width", 2)
        .attr("fill", "none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="//d3js.org/d3.v3.min.js"></script></script>
  <svg width="500px" height="500px"></svg>