javascript - 如何将 x Axis 移动到 svg 的底部

Question

我正在尝试使用 javascript 创建条形图。我创建了一个条形图，但想添加两个轴。目前卡在 x Axis 上。

我无法将 x Axis 移动到条形图的底部。我正在使用 d3 来定制 svg。我目前可以在顶部展示它，但想在底部展示它。

任何输入都会有用!

到目前为止，我的尝试是使用变换，但是当我执行此操作时，我的 Axis 消失了。

Google 搜索了其他几个解决方案，但没有一个成功。

代码:

<script>

d3.json("data_week3.json", function(data){

    var data_renewables = [];
    var data_nations = [];

    for (i = 0; i < data.length; i++)
    {
      data_renewables.push(data[i].Renewable);
      data_nations.push(data[i].Nation)
    }

    var width = 1000,
    height = 500;

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

    var chart = d3.select(".chart")
        .attr("width", width)
        .attr("height", height);

    var barWidth  = width / data_renewables.length;

    var bar = chart.selectAll("g")
        .data(data_renewables)
      .enter().append("g")
        .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

    bar.append("rect")
        .attr("y", function(d) { return y(d); })
        .attr("height", function(d) { return height - y(d); })
        .attr("width", barWidth - 1);

    bar.append("text")
        .attr("x", barWidth / 2)
        .attr("y", function(d) { return y(d); + 3; })
        .attr("dy", ".75em")
        .text(function(d) { return d; });

    var axisScale = d3.scale.linear()
        .domain([0, 30])
        .range([0, 1000]);

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

    chart.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

})

</script>

Answer 1

您给图表的高度为 height，然后您的变换将 x Axis 的顶部移动 height 值，因此它始终会被剪切离开。我建议您查看 margin 约定:https://bl.ocks.org/mbostock/3019563