CODEWITHSUNDEEP
javascriptd3.jssvgchartsgraphics
Deadpool
Deadpool

Reputation: 8240

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 ...

Upvotes: 0

Views: 679

Answers (2)

endkugelfang
endkugelfang

Reputation: 110

As Chetan already mentioned, it's a version problem of your included D3 file. You are including D3 V4 but using the syntax of D3 V3.

Within V4 they removed d3.svg. So everything you have to do is to change d3.svg.line() to d3.line() and it should work.

Ref: d3.svg.line() error: Uncaught TypeError: Cannot read property 'line' of undefined

EDIT-1: try this code Snippet 

var svg;
//The data for our line
var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
    { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
    { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

//This is the accessor function we talked about above
var lineFunction = d3.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; });

//The SVG Container
var svgContainer = d3.select("body").append("svg:svg")
        .attr("width", 200)
        .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
        .attr("d", lineFunction(lineData))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");

Upvotes: 1

Chetan
Chetan

Reputation: 942

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>

Upvotes: 3

Related Questions