rotation - D3 のラベルの前に表示される注文

Question

私はプログラミングもD3も初めてです。本「Getting started with D3」とインターネットで見つけることができるすべての例を使用して学習しています。

練習を開始するために、縦棒グラフを作成しようとしていますが、x ラベルで 2 つの問題が発生しています。

• x 軸の下に表示されるラベルが列と一致しません。正確には、ラベルが表示される前に数字が表示されます。
• ラベルを回転させる方法を考えています。回転属性を試してみると、すべての x 軸が回転していて、ラベルのみを回転させたいと思います。これに関連するいくつかの質問を見つけましたが、答えを完全には理解していません。

私のデータはこのようにフォーマットされています：

{"Low_Income_Household_Internet_access":
 [{"Country":"Chile","Value":9.69},
 {"Country":"New Zealand","Value":47.8},
 {"Country":"Greece","Value":25.39},
 {"Country":"Italy","Value":33.26},
 {"Country":"Israel","Value":40.31},
 {"Country":"Portugal","Value":22.72},
 {"Country":"United Kingdom","Value":56},...
 ],
 "High_Income_Household_Internet_access":
 [{"Country":"Chile","Value":59.78701735},
 {"Country":"New Zealand","Value":78.3},
 {"Country":"Greece","Value":81.14},
 {"Country":"Italy","Value":84.44},
 {"Country":"Israel","Value":86.59},
 {"Country":"Portugal","Value":89.73},
 {"Country":"United Kingdom","Value":90},...
]}

私のコードは次のとおりです。

function draw(data) {
"use strict";
var w = 600;
var h = 300;
var barPadding = 3;
    var margin=20;

var format = d3.format(",.0f");
var  x = d3.scale.ordinal().rangeBands([0, w-margin], .1),
y = d3.scale.linear().range([h-margin, margin]);
var  xAxis = d3.svg.axis().scale(x).orient("top").tickSize(0),
 yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-w);
var svg = d3.select("body").append("svg")
.attr("width", w)
    .attr("height", h)
.append("g")
    .attr("transform", "translate(" + margin + ",0)");

// Set the scale domain.
x.domain(d3.range(data.Low_Income_Household_Internet_access.length));
y.domain([0, d3.max(data.Low_Income_Household_Internet_access,function(d) { return d.Value; }) ]);
var bar = svg.selectAll("g.bar")
    .data(data.Low_Income_Household_Internet_access)
    .enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d) { return "translate(" + x(d.Country)+ "," + y(d.Value) + " ) "; });
bar.append("rect")
.attr("width", x.rangeBand())
.attr("height", function(d) { return h-margin- y(d.Value); })
.on("mouseover",function(d) {
    d3.select(this)
    .style("fill","red")
})
.on("mouseout",function(d) {
        d3.select(this)
        .style("fill","grey")
})
  .append("svg:title")
  .text(function(d) { return "" + d.Country + ": " + d.Value + " %"; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, 295)")
.call(xAxis);
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);}