I am trying to get some data in my map, however I have the following error:
Uncaught TypeError: Cannot read property 'length' of undefined.
This is my code:
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
/* pointer-events: none; This line needs to be removed */
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// Set the dimensions of the canvas / graph
var w = window.innerWidth,
h = window.innerHeight,
margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");// Format tooltip date / time
// We're passing in a function in d3.max to tell it what we're maxing (x value)
var x = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.x + 10; })])
.range([margin.left, w - margin.right]); // Set margins for x specific
// We're passing in a function in d3.max to tell it what we're maxing (y value)
var y = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.y + 10; })])
.range([margin.top, h - margin.bottom]); // Set margins for y specific
// Add a X and Y Axis (Note: orient means the direction that ticks go, not position)
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
// Define 'div' for tooltips
var div = d3.select("body")
.append("div") // declare the tooltip div
.attr("class", "tooltip") // apply the 'tooltip' class
.style("opacity", 0); // set the opacity to nil
// Adds the svg canvas
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Get the data
var datajson = '[ { x: 100, y: 110 }, { x: 83, y: 43 }, { x: 92, y: 28 }, { x: 49, y: 74 }, { x: 51, y: 10 }, { x: 25, y: 98 }, { x: 77, y: 30 }, { x: 20, y: 83 }, { x: 11, y: 63 }, { x: 4, y: 55 }, { x: 0, y: 0 }, { x: 85, y: 100 }, { x: 60, y: 40 }, { x: 70, y: 80 }, { x: 10, y: 20 }, { x: 40, y: 50 }, { x: 25, y: 31 } ]';
var data = JSON.parse(datajson);
data.forEach(function(d) {
d.x = d.x;
d.y = +d.y;
});
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// draw the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
// Tooltip stuff after this
.on("mouseover", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div .html(
'<a href= "http://google.com">' + // The first <a> tag
d.x +
"</a>" + // closing </a> tag
"<br/>" + d.y)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
</script>
</body>It goes wrong at line 59:
var y = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.y + 10; })])
I am trying to plot line chart with points.
Firstly your JSON string should be like:
var datajson = '[ { "x": 100, "y": 110 },
{ "x": 83, "y": 43 }, { "x": 92, "y": 28 },
{ "x": 49, "y": 74 },
{ "x": 51, "y": 10 }, { "x": 25, "y": 98 },
{ "x": 77, "y": 30 }, { "x": 20, "y": 83 },
{ "x": 11, "y": 63 }, { "x": 4, "y": 55 },
{ "x": 0, "y": 0 }, { "x": 85, "y": 100 },
{ "x": 60, "y": 40 }, { "x": 70, "y": 80 },
{ "x": 10, "y": 0 }, { "x": 40, "y": 50 },
{ "x": 25, "y": 31 } ]';
Note the double codes(") on the key.
Next
You are setting the domain like:
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) {
return d.x + 10;
})])
.range([margin.left, w - margin.right]); //
But data is defined much below this line.
So please move the below lines above:
var data = JSON.parse(datajson);
data.forEach(function(d) {
d.x = d.x;
d.y = +d.y;
});
working code here
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments