2016-07-19 5 views
53

Я новичок в D3 и получаю следующее сообщение об ошибке в моем демо-сценарий -Uncaught TypeError: Не удается прочитать свойство «линейной» неопределенной

FirstD3.jsp: 31 Uncaught TypeError: Не удается прочитать свойство «линейной» из неопределенный

Моего демо-код, как следовать

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<title>Linear Scales</title> 
<style type="text/css"> 

</style> 
</head> 
<body> 
<script type="text/javascript"> 
var dataset = [ 
      [ 5,  20 ], 
      [ 460, 90 ], 
      [ 250, 50 ], 
      [ 100, 33 ], 
      [ 330, 95 ], 
      [ 410, 12 ], 
      [ 468, 44 ], 
      [ 25, 67 ], 
      [ 85, 21 ], 
      [ 220, 88 ] 
     ]; 
var w = 500; 
var h = 100; 


var xScale = d3.scale.linear() 
     .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
     .range([0, w]); 

var yScale = d3.scale.linear() 
     .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
     .range([0, h]); 

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

     svg.selectAll("circle") 
     .data(dataset) 
     .enter() 
     .append("circle") 
     .attr("cx", function (d) { 
      return xScale(d[0]); 
     }) 
     .attr("cy", function(d) { 
      return yScale(d[1]); 
     }) 
     .attr("r", function (d) { 
      return Math.sqrt(h-(d[1])); 
     }); 

     svg.selectAll("text") 
     .data(dataset) 
     .enter() 
     .append("text") 
     .text(function (d) { 
      return d[0]+","+d[1]; 
     }) 
     .attr("x", function (d) { 
      return xScale(d[0]); 
     }) 
     .attr("y", function (d) { 
      return yScale(d[1]); 
     }) 
     .attr("font-size", "11px") 
     .attr("fill", "red"); 



</script> 
</body> 
</html> 

что вызывает эту ошибку? и как его решить

+8

В d3 4.x это 'd3.scaleLinear()'. –

ответ

148

В D3 v4 больше не указан d3.scale.linear(). Вместо этого используйте d3.scaleLinear().

+3

Я новичок в D3.js, d3.scale.ordinal() не определен в d3 v4? соответствующий метод для порядкового масштабирования –

+4

Спасибо, тоже помог. Они должны действительно обновить свои учебные пособия ... – Megajin

+2

@Megajin подробная информация об изменениях https://github.com/d3/d3/blob/master/CHANGES.md#scales-d3-scale –

0

Спасибо за ответ, я решил эту ошибку для следующего кода (я учусь D3.js):

var colorScale = d3.scale.linear().domain([0, 100]).range(["#add8e6", "blue"]);

со следующей ошибкой (внутри веб-страницы):

Uncaught TypeError: Cannot read property 'linear' of undefined at index.html:22

Смежные вопросы