Question

下午好。

我需要自动更新图表的大小。我的代码在上面。我的数据是这样的，当数据很小时我没有问题，但是当它很大时，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");

Answer 1

如果你想根据你拥有的数据来确定图表的大小，那么你可以简单地用计算代替你的“宽度”变量：例如：

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

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

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

如果你想获得幻想，你可以更好地控制条宽和间隙。类似的东西：

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)
  ...

你可以试试小提琴here

带自动调整大小的D3条形图

1 个答案: