하드 코드 데이터 D3 라이브러리

나는 다음과 같은 데이터에 대한 막대 그래프 플롯하려고 사용하는 플로팅 상태 : 간단한 막대 그래프를 그릴 수있는 "HTML/자바 스크립트"코드에 따라하드 코드 데이터 D3 라이브러리

name  value 
Locke  4 
Reyes  8 
Ford  15 
Jarrah  16 
Shephard 23 
Kwon  42

을 있는 데이터가

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.chart rect { 
fill: steelblue; 
} 

.chart text { 
    fill: white; 
    font: 10px sans-serif; 
    text-anchor: end; 
} 

</style> 
<svg class="chart"></svg> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var width = 420, 
barHeight = 20; 

var x = d3.scale.linear() 
.range([0, width]); 

var chart = d3.select(".chart") 
.attr("width", width); 

d3.tsv("data2.txt", type, function(error, data) { 
    x.domain([0, d3.max(data, function(d) { return d.value; })]); 

    chart.attr("height", barHeight * data.length); 

var bar = chart.selectAll("g") 
    .data(data) 
    .enter().append("g") 
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

bar.append("rect") 
    .attr("width", function(d) { return x(d.value); }) 
    .attr("height", barHeight - 1); 

bar.append("text") 
    .attr("x", function(d) { return x(d.value) - 3; }) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.value; }); 
}); 

function type(d) { 
    d.value = +d.value; // coerce to number 
    return d; 
} 

</script>

내가 브라우저에서 위의 스크립트를 열 d3.tsv

를 사용하여 가져올지고, 나는 어떤 문제없이 막대 차트를 얻을 수 있어요.

var data = [ 
    {name: "Locke", value: 4}, 
    {name: "Reyes", value: 8}, 
    {name: "Ford",  value: 15}, 
    {name: "Jarrah", value: 16}, 
    {name: "Shephard", value: 23}, 
    {name: "Kwon",  value: 42} 
];

내가 막대 차트를 받고 있지 않다 :

는 이제와 위의 코드에서 다음 줄을

d3.tsv("data2.txt", type, function(error, data) { 
    x.domain([0, d3.max(data, function(d) { return d.value; })]);

교체 할 때. 브라우저에서 언급 한 변경 사항을 사용하여 수정 된 코드를 열면 비어 있습니다.

내가 뭘 잘못하고 있니? 나는 자바 스크립트로 코딩을 시작 했으므로 어리석은 실수를 한 것일 수도있다. 어떤 도움도 마음에 든다. 감사.

출처

2014-09-30 user3664020

tsv 파일에서 가져온 데이터는 d3.tsv 함수의 세 번째 매개 변수 인 콜백 함수 (오류, 데이터)에서 사용할 수 있습니다. 당신이 JS 객체에서 데이터를 사용하려면 대신 당신은 라인

d3.tsv("data2.txt", type, function(error, data) {

및

});

를 제거하고 사용하기 전에 '데이터'변수를 넣어해야합니다. 전체 예제는 here입니다.

출처

2014-09-30 12:21:00

하드 코드 데이터 D3 라이브러리

답변

관련 문제