d3.select 방법 누군가가 지적 할 수 있습니다, 내가 datavis와 D3 라이브러리에 새로운 오전

작업과 나는 코드를 실행하면 http://mbostock.github.com/d3/tutorial/bar-1.html d3.select 방법 누군가가 지적 할 수 있습니다, 내가 datavis와 D3 라이브러리에 새로운 오전

는, 아무것도 내 웹 페이지에 표시되지 않습니다 여기에 혀를 따르려고하지 문제??

d3.select 메서드와 관련이 있다고 생각합니다. 코드를 실행하고 검사 할 때 본문이 비어 있으므로 아무 것도 생성되지 않는다고 가정합니다. 어떤 도움이라도 대단히 감사하게 될 것입니다 !!!

<title>3Dtut - 1</title> 
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"> </script> 

<script type="text/javascript"> 
var data = [4, 8, 15, 16, 23, 42]; 

//container for the bar chart 
var chart = d3.select("body").append("div") 
.attr("class", "chart"); 

//adding div elements to the bar chart 
chart.selectAll("div") 
    .data(data) 
    .enter().append("div") 
    .style("width", function(d) { return d * 10 + "px"; }) 
    .text(function(d) { return d; }); 
</script> 


<STYLE type="text/css"> 
.chart div { 
    font: 10px sans-serif; 
    background-color: steelblue; 
    text-align: right; 
    padding: 3px; 
    margin: 1px; 
    color: white; 
} 
</STYLE> 
</head> 
<body> 
</body> 
</html>

출처

2012-10-30 Daft

문제는 html 문서 내에서 <script> .. </script>의 위치와 관련이 있습니다.

아니요 body 요소가 아직 스크립트가 실행되는 순간에 존재합니다. 이는 d3.select("body")이 비어 있고 div.chart이 추가되지 않음을 의미합니다.

<script> .. </script>을 <body> .. </body> 부분으로 이동하십시오. 이렇게하면 코드가 실행될 때 body 요소가 존재하게됩니다.

출처

2012-10-30 17:21:57 nautat

스크립트가 실행되기 전에 DOM이 완전히로드 될 수 있도록하기 위해'script' 태그가 body 태그의 ** end **에 있어야한다고 언급하고 싶을 것입니다. – paradite

본문 내부를 사용하면 태그 또는 다른 태그 중에서 사용할 수있을뿐만 아니라 더 빨리 실행됩니다. 또한 div 태그로 U 클래스를 만들 수 있습니다. 하나를 선택하고 d3.select (". one")로 사용하면 일치하지 않습니다.

출처

2012-10-31 06:32:09

<body> 요소 내에 <script> 태그를 넣지 않으려는 경우 DOM 준비가 완료되면 브라우저에 d3 코드 (또는 다른 JavaScript 코드)를 실행하도록 지시 할 수 있습니다. jQuery와 같은 라이브러리를 사용하여

는

, 당신은 사용할 수 있습니다

$(document).ready(function() { 
    // Your d3 code here 
});

이 전체 DOM이 <body> 요소를 포함하여, 준비 후 스크립트가 실행되어 있는지 확인합니다.

예제 및 jQuery 준비 함수의 짧은 버전은 http://learn.jquery.com/using-jquery-core/document-ready/을 참조하십시오.

출처

2014-10-05 17:03:34 jbmusso

d3.select 방법 누군가가 지적 할 수 있습니다, 내가 datavis와 D3 라이브러리에 새로운 오전

답변

관련 문제