d3.js: Получение градиентов на гистограмме?

Я использовал Mike's code, чтобы создать гистограмму, но просто не могу получить градиент. Страница отображается пустым. Firebug не показывает ошибки, поэтому у меня в основном есть два вопроса:
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

Вы имеете два градиента в вашем примере с тем же идентификатором. Вы также не указали ширину элементов html или body, что означает, что вы ничего не увидите. В противном случае ваш код будет правильным.

Это работает для меня на Firefox ...

<!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

работ. Спасибо :) Итак, нет способа отлаживать эти вещи (так как ничего не появилось на Firebug) – Nav

DOM инспектор показал бы, что элементы не того размера, который вы ожидаете от них. –

d3.js: Получение градиентов на гистограмме?

ответ

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