Javascript 具有自动调整大小的D3条形图

下午好

我需要自动更新图表的大小。 我的代码在上面。 我的数据是这样的，当数据很小时，我没有问题，但当数据很大时，xAxis中的值和条重叠

var data = [
  {key:1, value:5},
  {key:2, value:10},
  {key:3, value:15},
  {key:4, value:26},
  {key:5, value:33}
];

var margin = {
 top: 30,
 right: 10,
 bottom: 30,
 left: 30
},

width = 900 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

 var x = d3.scale.ordinal()
  .domain(data.map(function(d) {
    return d.key;
}))
.rangeRoundBands([margin.left, width], 0.05);

var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) {
    return d.value;
})])
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var key = function(d) {
return d.key;
 };

 var svg = d3.select("#chart").append("svg")
 .attr("width", width + margin.left + margin.right + 10)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .text("Your tooltip info")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Log(number sts) vs Nodes  - Gen" + " " + startGen +  " "+"to" + " "+ endGen)

 svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(-30," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width)
.attr("dy", 30)
.attr("text-anchor", "end")
.text("Number of nodes");

 svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -30)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Log(Number Sts)");



var bars = svg.selectAll("rect")
 .data(data, key)
 .enter().append("rect")
 .attr("x", function(d) {
    return x(d.key) + x.rangeBand() / 2 - 40;
  })
 .attr("y", function(d) {
    return y(d.value);
  })
  .attr("width", 20)
  .attr("height", function(d) {
    return height - y(d.value);
  })
 .style("fill", "blue");

---

如果您想根据您拥有的数据量调整图表的大小，那么您可以简单地用一个计算替换“宽度”变量：类似于：

width = Math.min(900, 20 * data.length);

var barWidth = Math.max(1, 0.9 * x.rangeBand());
var halfGap = Math.max(0, x.rangeBand() - barWidth) / 2;

var bars = svg.selectAll("rect")
  .data(data, key)
  .enter().append("rect")
  .attr("x", function(d) {
    return x(d.key) + halfGap - 30 ;
  })
  .attr("width", barWidth)
  ...

但也许你的意思是根据有多少空间来确定酒吧的大小？您已经在使用x.rangeBand，它提供了可用的范围宽度-请尝试将其用于条形宽度

...
.attr("width", x.rangeBand())

如果你想得到新奇感，你可以更好地控制酒吧的宽度和间隙。比如：

width = Math.min(900, 20 * data.length);

var barWidth = Math.max(1, 0.9 * x.rangeBand());
var halfGap = Math.max(0, x.rangeBand() - barWidth) / 2;

var bars = svg.selectAll("rect")
  .data(data, key)
  .enter().append("rect")
  .attr("x", function(d) {
    return x(d.key) + halfGap - 30 ;
  })
  .attr("width", barWidth)
  ...

---

您可以试试小提琴

告诉您如何在x轴标签中包含换行符。除此之外，如果我理解正确的话，你能做的很少——在给定大小的屏幕上显示的数据量是有限制的。虽然xaxis没有更新，但条形图还是更新了？如何添加xAxis更新？xAxis不更新是什么意思？如果更改数据，则必须更新条形图和轴属性。当我增加数据时，xAxis中的数字也会增加，并且值重叠，我需要避免这种情况。有什么建议吗？