即使使用了 preserveAspectRatio，D3 直方图也没有响应答案

【问题标题】：D3 histogram is not responsive even after using preserveAspectRatio即使使用了 preserveAspectRatio，D3 直方图也没有响应
【发布时间】：2016-05-26 14:01:02
【问题描述】：

我正在制作一个高度相等的 D3 直方图，但即使使用了“viewBox”和“preserveaspectRatio”属性，图表也没有响应。这是我正在使用的代码

                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");

上述代码的工作小提琴链接是here https://jsfiddle.net/hawkeye15/m22pyyjL/

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

删除

 .attr("width",w)
 .attr("height",h)

它会正常工作的。下面是小提琴链接

https://jsfiddle.net/m22pyyjL/2/

【讨论】：

【解决方案2】：

试试这个：

.attr("width", "100%")
.attr("height", "100%")

而不是使用您的 w 和 h 变量。

小提琴：https://jsfiddle.net/pq9hccat/

【讨论】：