Question

我遇到一个问题，让轴实际显示在我的条形图上，到目前为止没有任何运气，因为我似乎无法绕过什么错误。它与缩放有关吗？

轴是否呈现但是被条形切割出svg？

<script type="text/javascript">


    //Width and height
    var w = 850;
    var h = 650;
    var barpadding = 20;


    var dataset = [40, 99];


    //Create SVG element
    var svg = d3.select(".wrapper")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    //Create scale functions
    var x = d3.scaleBand()
            .range([0, w])
            .padding(0.1);
    var y = d3.scaleLinear()
            .range([h, 0]);


    svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", function (d, i) {
                return i * (w / dataset.length);
            })
            .attr("y", function (d) {
                return h - (d * 4);
            })
            .attr("width", w / dataset.length - barpadding)
            .attr("height", function (d) {
                return d * 4;
            })
            .attr("fill", "dodgerblue");

    svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function (d) {
                return d;
            })
            .attr("text-anchor", "middle")
            .attr("x", function (d, i) {
                return i * (w / dataset.length) + (w / dataset.length - barpadding) / 2;
            })
            .attr("y", function (d) {
                return h - (d * 4) + 14;
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", "18px")
            .attr("fill", "black");

    d3.select(".axis")
            .call(d3.axisBottom(x));

</script>

Answer 1

要显示轴，您必须先添加<g>元素。之后，由于轴始终在原点（0,0）处生成，因此您必须将其平移，然后才调用轴：

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + someValue + ")")
    .call(d3.axisBottom(x));

我通常提供一个工作演示，但这次我会跳过它，因为你的代码有一些问题：

缺少轴的边距
缺乏尺度范围
使用魔术数字定位条形，而不是缩放

但是，如果你想看到你的代码的轴高于底部的20px，这就是它的样子：https://jsfiddle.net/qcnako3g/

d3轴没有出现

1 个答案: