位置圖左上角

我是一個使用d3和javascript的新手，但設法湊齊了一些代碼（使用從在線示例中借用的代碼）來創建一個簡單的柱狀圖，其中用不同的顏色表示變量的狀態。除非將圖表的margin.top或margin.left調整爲較小的值，否則圖表不會位於畫布的左上角。如果我將瀏覽器窗口調整爲縱向，則圖表會左對齊，但在其上方會顯示白色大量空白區域。如果我調整瀏覽器窗口以將圖表對齊到頂部，但左側有大量空白區域。有人可以告訴我哪裏出了問題。提前致謝。位置圖左上角

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 


.axis text { 
    font: 10px sans-serif; 
} 
</style> 

<svg class="chart"></svg> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

var data = [ 
    { 
     "status": "Low", 
     "value": "20", 
     "color": "red" 
    }, 
    { 
     "status": "Marginal", 
     "value": "10", 
     "color": "orange" 
    }, 
    { 
     "status": "High", 
     "value": "70", 
     "color": "green" 
    } 
]; 

var margin = {top: 10, right: 20, bottom: 30, left: 30}, 
    width = 200 - margin.left - margin.right, 
    height = 200 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
.rangeRoundBands([0, width], .1); 

var y = d3.scale.linear() 
.range([height, 0]); 

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

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

var svg = d3.select("body").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


x.domain(data.map(function(d) { return d.status; })); 
y.domain([0, 100]); 


svg.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + height + ")") 
.call(xAxis); 

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

svg.selectAll(".bar") 
.data(data) 
.enter().append("rect") 
.attr("class", "bar") 
.attr("x", function(d) { return x(d.status); }) 
.attr("width", x.rangeBand()) 
.attr("y", function(d) { return y(d.value); }) 
.attr("height", function(d) { return height - y(d.value); }) 

.style("fill", function(d) { return d.color; }); 

function type(d) { 
    d.frequency = +d.frequency; 
    return d; 
} 
</script>

來源

2015-07-12 weaverd

的問題似乎是，你有一個<svg class="chart">元素，但你的代碼，一個後追加另一個<svg>元素的頁面，第一個需要一些空間

來源

2015-07-12 01:53:25

位置圖左上角

回答

相關問題