1
我在繪製值時遇到問題。酒吧超越了Y軸。D3條形圖。值與Y軸不對齊
<div id = "Bar1">
<script>
var margin1 = {top: 40, right: 20, bottom: 30, left: 40},
width1 = 460 //- margin.left - margin.right,
height1 = 200 //- margin.top - margin.bottom;
var formatPercent1 = d3.format("");
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width1], 0);
//.rangeRoundBands([width1, 0);
var y1 = d3.scale.linear()
.range([height1, 0]);
var xAxis1 = d3.svg.axis()
.scale(x1)
.orient("bottom");
var yAxis1 = d3.svg.axis()
.scale(y1)
.orient("left")
.tickFormat(formatPercent1);
var tip1 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
})
var svg1 = d3.select("#Bar1").append("svg")
.attr("width", width1 + margin1.left + margin1.right)
.attr("height", height1 + margin1.top + margin1.bottom)
.append("g")
.attr("transform", "translate(" + margin1.left + "," + margin1.top + ")");
svg1.call(tip1);
d3.tsv(data, type, function(error, data1) {
x1.domain(data1.map(function(d) { return d.letter; }));
y1.domain([0, d3.max(data1, function(d) { return d.frequency; })]);
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height1 + ")")
.call(xAxis1);
svg1.append("g")
.attr("class", "y axis")
.call(yAxis1)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg1.selectAll(".bar")
.data(data1)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height1 - y(d.frequency); })
.on('mouseover', tip1.show)
.on('mouseout', tip1.hide)
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
</div>
The CSV:
letter frequency
django 12
dictionary 33
C 55
D 100
E 90
F 300
G 80
H 10
I 0
J 0
任何人都可以請幫我用這個代碼。我不明白爲什麼這是一個問題。 X和Y軸也縮放。有什麼我錯過了嗎?
感謝, 斯利拉姆
嗨Veprosa,感謝您的答覆。我複製粘貼你的代碼,它似乎工作。你能讓我知道你做了什麼改變嗎?除了將CSV內容輸入變量「tsv」。此外矩形之間還有一段距離。如果您對該部分進行了更改,請讓我知道。 – Sriram
嗨,我編輯了變化,但你總結了它 - 我改成了'd3.tsv.parse'內聯解析,我也修正了'x'和'x1'混淆,並刪除了'd3.tip'以求清晰。至於差距,我沒有觸及那部分代碼。如果你想要差距,你可能想把'.attr(「width」,x1.rangeBand())'改成'.attr(「width」,x1.rangeBand() - 1)'或者任何你想要的空隙大小希望擁有。 – veproza