Question

我想在我的地图中获取一些数据，但是我有以下错误：

未捕获的TypeError：无法读取未定义的属性“length”。

这是我的代码：

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

第59行出错：

  var y = d3.scale.linear()
              .domain([0, d3.max(data, function (d) { return d.y + 10; })])

我试图用点绘制折线图。

Answer 1

首先，您的JSON字符串应该是：

    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 }      ]';

注意键上的双重代码（“）。

下一步

您正在设置域名：

var x = d3.scale.linear()
      .domain([0, d3.max(data, function(d) {
        return d.x + 10;
      })])
      .range([margin.left, w - margin.right]); //

但数据定义远低于此行。

所以请移动上面的以下行：

var data = JSON.parse(datajson);



    data.forEach(function(d) {
      d.x = d.x;
      d.y = +d.y;
    });

工作代码here

未捕获的TypeError：无法使用json数据读取折线图中未定义的属性“长度”

1 个答案: