帶有自動大小的D3條形圖

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