d3.js : 막 대형 차트에서 그라디언트 가져 오기?

가로 막 대형 차트를 만들 때 Mike's code을 사용했지만 그래디언트를 그릴 수 없습니다. 페이지가 공백으로 렌더링됩니다. 파이어 버그는 오류가 없으므로 기본적으로 두 가지 질문이 있습니다.
1. 내가 뭘 잘못하고 있니?
2. 스타일에 오류가 있고 Firebug에서 오류를 표시하지 않으면 어떻게 디버깅하고 문제의 원인을 찾아야합니까?d3.js : 막 대형 차트에서 그라디언트 가져 오기?

코드 :

<!DOCTYPE html> 
<html> 
<body> 
<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="d3/d3.v3.min.js"></script> 
<script> 
var svg = d3.select("body"); 

var gradient = svg.append("svg:defs") 
    .append("svg:linearGradient") 
    .attr("id", "gradient") 
    .attr("x1", "0%") 
    .attr("y1", "0%") 
    .attr("x2", "100%") 
    .attr("y2", "100%") 
    ;//.attr("spreadMethod", "pad"); 

gradient.append("svg:stop") 
    .attr("offset", "0%") 
    .attr("stop-color", "#0c0") 
    .attr("stop-opacity", 1); 

gradient.append("svg:stop") 
    .attr("offset", "100%") 
    .attr("stop-color", "#c00") 
    .attr("stop-opacity", 1); 


var data = [4, 8, 15, 16, 23, 42]; 
var width = 420, barHeight = 20; 

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

    var gradient = svg.append("svg:defs") 
    .append("svg:linearGradient") 
    .attr("id", "gradient") 
    .attr("x1", "0%") 
    .attr("y1", "0%") 
    .attr("x2", "100%") 
    .attr("y2", "100%") 
    .attr("spreadMethod", "pad"); 

    gradient.append("svg:stop") 
    .attr("offset", "0%") 
    .attr("stop-color", "#0c0") 
    .attr("stop-opacity", 1); 

    gradient.append("svg:stop") 
    .attr("offset", "100%") 
    .attr("stop-color", "#c00") 
    .attr("stop-opacity", 1); 

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

var chart = d3.select(".chart") 
    .attr("width", width) 
    .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", x) 
    .attr("height", barHeight - 1) 
    .style("fill", "url(#gradient)"); 


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

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

출처

2014-03-03 Nav

동일한 ID로 예를 들어 두 그라디언트를했습니다. html 또는 body 요소에 너비를 지정하지 않았으므로 아무 것도 표시되지 않습니다. 그렇지 않으면 코드가 정확합니다.

이 파이어 폭스에 나를 위해 작동 ...

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

.chart rect { 
    fill: steelblue; 
} 

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

html, body { 
    width: 100%; 
    height: 100%; 
} 

</style> 
<svg class="chart"></svg> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
var svg = d3.select("body"); 


var data = [4, 8, 15, 16, 23, 42]; 
var width = 420, barHeight = 20; 

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

    var gradient = svg.append("svg:defs") 
    .append("svg:linearGradient") 
    .attr("id", "gradient") 
    .attr("x1", "0%") 
    .attr("y1", "0%") 
    .attr("x2", "100%") 
    .attr("y2", "100%") 
    .attr("spreadMethod", "pad"); 

    gradient.append("svg:stop") 
    .attr("offset", "0%") 
    .attr("stop-color", "#0c0") 
    .attr("stop-opacity", 1); 

    gradient.append("svg:stop") 
    .attr("offset", "100%") 
    .attr("stop-color", "#c00") 
    .attr("stop-opacity", 1); 

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

var chart = d3.select(".chart") 
    .attr("width", width) 
    .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", x) 
    .attr("height", barHeight - 1) 
    .style("fill", "url(#gradient)"); 


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

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

출처

2014-03-03 09:14:42

작품. 감사합니다. :) 그래서이 것들을 디버깅 할 방법이 없습니다. (방화범에 아무것도 나타나지 않았기 때문에) – Nav

DOM 검사자는 요소가 예상 한 크기가 아니라는 것을 보여줄 것입니다. –

d3.js : 막 대형 차트에서 그라디언트 가져 오기?

답변

관련 문제