D3 v4 X 轴长标签半隐藏

Question

我正在处理示例响应式 d3 v4 条形图，这里的 x 轴标签有点长，因此在图表中不完全可见。请检查小提琴代码：http://jsfiddle.net/NayanaDas/w13y5kts/4/

JavaScript 代码：

// set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 550 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand()
  .range([0, width])
  .padding(0.1);
var y = d3.scaleLinear()
  .range([height, 0]);

//define tooltip
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([20, 0])
  .html(function(d) {
    return "<strong>Sales:</strong> <span style='font-weight:normal;color:red'>" + d.sales + "</span>";
  });
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#container").append("svg")
  //.attr("width", width + margin.left + margin.right)
  //.attr("height", height + margin.top + margin.bottom)
  .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 550 300")
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")")
    .call(tip);
// Add background color to the chart
svg.append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", width)
   .attr("height", height)
   .attr("class","backbar");
// get the data
//d3.csv("sales.csv", function(error, data) {
//  if (error) throw error;
var data = d3.csvParse(d3.select('#data_csv').text());
console.log(data);
// format the data
data.forEach(function(d) {
  d.sales = +d.sales;
});
// Scale the range of the data in the domains
x.domain(data.map(function(d) {
  return d.name;
}));
y.domain([0, d3.max(data, function(d) {
 return d.sales;
})]);
// append the rectangles for the bar chart
svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.name);
  })
  .attr("width", x.bandwidth())
  .attr("y", function(d) {
    return y(d.sales);
  })
  .attr("height", function(d) {
    return height - y(d.sales);
  })
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide);
// add the x Axis
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
      .style("text-anchor", "end")
      .style("fill", "#000")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-50)" );
 // add the y Axis
svg.append("g")
  .call(d3.axisLeft(y));
// add y-axis label
 svg.append("text")
   .attr("text-anchor", "middle")  // this makes it easy to centre the text as the transform is applied to the anchor
   .attr("transform", "translate("+ (-margin.left/2) +","+(height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
   .text("Hours");
//});
$('#expandbtn').click(function (e) {
        $("#container").css("height","100%");
        $('#box').addClass('panel-fullscreen show');
        $('#compressbtn').removeClass("hide").addClass("show");
        $('#expandbtn').removeClass("show").addClass("hide");
 });
    $('#compressbtn').click(function (e) {
            $("#container").css("height","480px");
            $('#box').removeClass('panel-fullscreen');
            $('#expandbtn').removeClass("hide").addClass("show");
        $('#compressbtn').removeClass("show").addClass("hide");
    });

我还添加了两个按钮，单击展开按钮时，图表

将以全屏模式显示，单击压缩按钮时，图表将恢复正常大小。不知道这是否影响了 x 轴标签的显示。如何使长标签可见？

Answer 1

将 svg viewBox 属性更改为 0 0 550 550 。

前两个值是显示区域左上角的 X 和 Y 坐标，后两个是宽度和高度。 viewBox仅按属性设置。工作原理

还要检查什么是preserveAspectRatio值及其工作原理