Html d3.js：在条形图上获取渐变？_Html_Svg_D3.js

Html d3.js：在条形图上获取渐变？

html svg d3.js

Html d3.js：在条形图上获取渐变？,html,svg,d3.js,Html,Svg,D3.js,我曾经创建过条形图，但似乎无法在上面添加渐变。页面显示为空白。Firebug没有显示错误，所以我基本上有两个问题： 1.我做错了什么？ 2.当样式中存在错误并且Firebug没有显示错误时，我如何调试并找出导致问题的原因守则： <!DOCTYPE html> <html> <body> <meta charset="utf-8"> <style> .chart rect { fill: steelblue; } .chart

我曾经创建过条形图，但似乎无法在上面添加渐变。页面显示为空白。Firebug没有显示错误，所以我基本上有两个问题：
1.我做错了什么？
2.当样式中存在错误并且Firebug没有显示错误时，我如何调试并找出导致问题的原因

守则：

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


.chart rect{
填充：钢蓝；
}
.图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
var svg=d3.选择（“主体”）；
var gradient=svg.append（“svg:defs”）
.append（“svg:linearGradient”）
.attr（“id”、“梯度”）
.attr（“x1”，“0%”）
.attr（“y1”，“0%”）
.attr（“x2”，“100%”）
.attr（“y2”，“100%”）
;//.属性（“扩展方法”、“pad”）；
gradient.append（“svg:stop”）
.attr（“偏移量”、“0%”）
.attr（“停止颜色”，“0c0”）
.attr（“停止不透明度”，1）；
gradient.append（“svg:stop”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”，“c00”）
.attr（“停止不透明度”，1）；
var数据=[4,8,15,16,23,42]；
可变宽度=420，杆高=20；
var svg=d3.select（“body”）.append（“svg:svg”）
.attr（“宽度”，宽度）
.attr（“高度”，barHeight）；
var gradient=svg.append（“svg:defs”）
.append（“svg:linearGradient”）
.attr（“id”、“梯度”）
.attr（“x1”，“0%”）
.attr（“y1”，“0%”）
.attr（“x2”，“100%”）
.attr（“y2”，“100%”）
.attr（“扩展方法”、“pad”）；
gradient.append（“svg:stop”）
.attr（“偏移量”、“0%”）
.attr（“停止颜色”，“0c0”）
.attr（“停止不透明度”，1）；
gradient.append（“svg:stop”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”，“c00”）
.attr（“停止不透明度”，1）；
var x=d3.scale.linear（）
.domain（[0，d3.max（数据）]）
.范围（[0，宽度]）；
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度）
.attr（“高度”，条形高度*数据长度）；
变量条=图表。选择全部（“g”）
.数据（数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
附加条（“rect”）
.attr（“宽度”，x）
.attr（“高度”，酒吧高度-1）
.style（“填充”、“url（#渐变）”）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d）-3；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{return d；}）；

在您的示例中，有两个渐变具有相同的id。您还没有为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>


.chart rect{
填充：钢蓝；
}
.图表文本{
填充物：白色；
字体：10px无衬线；
文本锚定：结束；
}
html，正文{
宽度：100%；
身高：100%；
}
var svg=d3.选择（“主体”）；
var数据=[4,8,15,16,23,42]；
可变宽度=420，杆高=20；
var svg=d3.select（“body”）.append（“svg:svg”）
.attr（“宽度”，宽度）
.attr（“高度”，barHeight）；
var gradient=svg.append（“svg:defs”）
.append（“svg:linearGradient”）
.attr（“id”、“梯度”）
.attr（“x1”，“0%”）
.attr（“y1”，“0%”）
.attr（“x2”，“100%”）
.attr（“y2”，“100%”）
.attr（“扩展方法”、“pad”）；
gradient.append（“svg:stop”）
.attr（“偏移量”、“0%”）
.attr（“停止颜色”，“0c0”）
.attr（“停止不透明度”，1）；
gradient.append（“svg:stop”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”，“c00”）
.attr（“停止不透明度”，1）；
var x=d3.scale.linear（）
.domain（[0，d3.max（数据）]）
.范围（[0，宽度]）；
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度）
.attr（“高度”，条形高度*数据长度）；
变量条=图表。选择全部（“g”）
.数据（数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
附加条（“rect”）
.attr（“宽度”，x）
.attr（“高度”，酒吧高度-1）
.style（“填充”、“url（#渐变）”）；
附加条（“文本”）
.attr（“x”，函数（d）{返回x（d）-3；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{return d；}）；

有效。谢谢：）所以没有办法调试这些东西（因为Firebug上没有显示任何东西），DOM检查器会显示元素的大小不是您期望的大小。