2
私はD3チュートリアルに従っていますが、軸を追加するとデータの半分が消えてしまい、その理由を理解できません。私は軸がデータのために意味する空間を占めていると思ったので、変換プロパティに余分な10ピクセルを追加しましたが、何の違いもありません。軸を追加するとデータが取り込まれる
var GIST = "https://gist.githubusercontent.com/charisseysabel/f8f48fbf11b8a1b0d62cbe2d6bdc2aa6/raw/2ead1537adb822fbd59a666afd5334d525480a13/nano-2017.tsv"
var width = 1000,
height = 550,
margin = {top: 20, right: 30, bottom: 30, left: 4};
var y = d3.scaleLinear()
.range([height, 0]);
var yScale = d3.scaleLinear()
.range([height, 0]);
var xScale = d3.scaleLinear()
.range([0, width]);
var xAxis = d3.axisLeft(yScale);
var yAxis = d3.axisBottom(xScale);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", height);
chart.append("g")
.attr("transform", "translate(10, 0)")
.call(xAxis);
chart.append("g")
.attr("transform", "translate(0, 540)")
.call(yAxis);
d3.tsv(GIST, type, function(error, data) {
y.domain([0, d3.max(data, function(d) { return d.value; })]);
var barWidth = width/data.length;
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + ((i * barWidth) + 10) + ",0)"; }
);
bar.append("rect")
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.attr("width", barWidth - 1);
bar.append("text")
.attr("x", (barWidth/2) - 2)
.attr("y", function(d) { return y(d.value) + 3; })
.attr("dy", ".75em")
.text(function(d) { return d.value; });
});
function type(d) {
d.value = +d.value;
return d;
}
実際のGerardoの2つの推奨事項を示すgist:http://blockbuilder.org/hydrosquall/a5745c86423ccee34dcb4fda2243db03。 Axesコードを一番下に移動するだけではそれはできませんでしたが、上記の両方の推奨事項を組み合わせると効果がありました。 –
申し訳ありませんが、私が「スクリプトの一番下」と言ったとき、私は実際には** d3.tsvの底を意味しました**これは**非同期**です。スニペットの一番下にあるが、 'd3.tsv'の外にあるコードは、' d3.tsv'の中の**コードの前に**実行されます。ここを見てください、最初の勧告は単独で動作します:https://bl.ocks.org/anonymous/d69a42346caa66d5eb77ce3ef3a29167/34863c43b6444456b279b21c84ec88581bf09f84。私はこれをもっと明確にするために答えを編集します。 –