Javascript D3直方图即使在使用PreserveSpectratio后也没有响应
我正在制作一个具有相同高度的D3柱状图,但即使使用了“viewBox”和“PreserveSpectratio”属性,图表也没有响应。这是我正在使用的代码Javascript D3直方图即使在使用PreserveSpectratio后也没有响应,javascript,jquery,d3.js,Javascript,Jquery,D3.js,我正在制作一个具有相同高度的D3柱状图,但即使使用了“viewBox”和“PreserveSpectratio”属性,图表也没有响应。这是我正在使用的代码 var w = 800; var h = 80; var barPadding = 1; var hello = 10; var dataset = [ hello, 10, 13,
var w = 800;
var h = 80;
var barPadding = 1;
var hello = 10;
var dataset = [ hello, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20 ];
var dataset2 = [ "hey", "you", "know", "that", "you", "are", "an", 18, 15, 13,
11, 12, 15, 20 ];
//Create SVG element
var svg = d3.select("#chart")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("viewBox","0 0 800 80")
.attr("preserveAspectRatio","xMinYMin meet")
.append("g")
.attr("transform", "translate(1,1)");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", 0)
.attr("width", 50)
.attr("height", 50)
.attr("rx", 5)
.attr("ry", 5)
.attr("fill", function(d) {
return "rgb(" + (d * 15) + ", " + (d * 5) + ", " + (d * 5) + ")";
})
.style("opacity", function(d){
return 0.05 * (d);
});
svg.selectAll("text")
.data(dataset2)
.enter()
.append("text")
.text(function(d) { return d; })
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset2.length) + (w / dataset2.length - barPadding) / 2;
})
.attr("y", 18)
.attr("font-family", "sans-serif")
.attr("font-size", "8px")
.attr("fill", "black");
以上代码的工作小提琴链接是
试试这个:
.attr("width", "100%")
.attr("height", "100%")
而不是使用w
和h
变量
小提琴:删除
.attr("width",w)
.attr("height",h)
它会很好用的。下面是小提琴链接