d3.js에서 웹 속성에 정보 표시

변수 x 및 y를 선언 한 후 <svg> 태그와 그 이후의 태그가 더 이상 내 웹 브라우저의 관리자에 나타나지 않는 이유를 설명해 주시겠습니까? 방금 언급 한 변수를 제거하면 <svg> 태그와 id = bar 속성이 다음 코드와 같이 올바르게 나타납니다.d3.js에서 웹 속성에 정보 표시

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> --> 
<script src="./scripts/d3/d3.min.js"></script> 

<script type="./scripts/d3js.js"></script> 
<link rel="stylesheet" type="text/css" href="./styles/d3css.css"> 
<title>d3</title> 
</head> 

<body> 

<script type="text/javascript"> 



var data = [213,20,60,232,150,74,110,39]; 
var w = 1000; 
var h = 500; 

var x = d3.scale.linear() 
    .domain([0, data.length]) 
    .range([0,w]); 
var y = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0,h]); 


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


svg.selectAll(".bar") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d,i){ 
     return i * 40; 
    }) 
    .attr("y", 0) 
    .attr("width", 39) 
    .attr("height", function(d,i){ 
     return y(d); 
    }) 


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

출처

2016-09-11 Rodrigo Luna

D3 v4.x를 사용 중입니다. 해당 버전에는 scale.linear()이 없습니다. 그 대신 다음과 같아야합니다.

var x = d3.scaleLinear()

var y과 동일합니다.

이 줄은 var svg (SVG 요소를 추가) 앞에 오기 때문에 오류가 발생하고 SVG 태그가 생성되지 않습니다. 콘솔을 보면 오류가 표시됩니다.

출처

2016-09-11 22:14:29

d3.js에서 웹 속성에 정보 표시

답변

관련 문제