javascript - d3 v4 如何将数据标签添加到条形图

Question

我正在处理 d3 图，但我似乎无法将标签定位到条形图中相应的条上。我正在使用 d3 v4。

http://orm-chimera-prod.s3.amazonaws.com/1230000000345/images/idvw_0902.png

这是期望的结果，在我的例子中 y 定位是理想的，但是 x 位置不会移动并且数据标签都粘在左边

<!-- Wrap these elements in the necessary html and bootstrap classes to achieve the desired layout as depicted in the Assignment instructions -->
<div class="flex col-md-2" id="table">
    <h2>Annual Sightings Table</h2>
    <div class="flex-container" data-ng-app="UFOSightingsApp">
        <div class="row">
            <div data-ng-controller="UFOSightingsController">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Year</th>
                            <th>Sighting Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-ng-repeat="s in sightings">
                            <td>{{s.sightingYear}}</td>
                            <td>{{s.sightingCount}}</td>
                        </tr>
                    </tbody>

                </table>
            </div>
        </div>
    </div>

</div>



<div class="flex col-md-8 col-md-offset-2" id="graph">
    <h2>Annual Sightings Graph</h2>
    <svg width="100%" height="600px" style="border: 1px solid #000">
    </svg>
</div>

<script src="Scripts/d3/d3.js"></script>

<script>
    var app = angular.module("UFOSightingsApp", []);

    app.controller("UFOSightingsController", function ($scope, $http) {

        $http.get("/api/UFOSightings").success(function (data) {
            $scope.sightings = data;
        });


    });



    var svg = d3.select("svg");

    var svgWidth = svg.style("width");
    var svgHeight = svg.style("height");
    var width = svgWidth.substring(0, svgWidth.length - 2) - 0;
    var height = svgHeight.substring(0, svgHeight.length - 2) - 65;

    var xScale = d3.scaleBand()
        .range([0, width])
        .padding(0.1);


    var yScale = d3.scaleLinear()
        .range([height, 0]);

    var xAxis = d3.axisBottom()
        .scale(xScale);


    var yAxis = d3.axisLeft()
        .scale(yScale);




    d3.json("SightingData.json", function (error, data) {

        if (error) throw error;

        data.forEach(function (d) {
            d.sightingCount = +d.sightingCount;
            d.sightingYear = d.sightingYear;
        });

        xScale.domain(data.map(function (d) { return d.sightingYear; }));
        yScale.domain([0, d3.max(data, function (d) { return d.sightingCount; })]);

        //draw the bars
        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", function (d) { return xScale(d.sightingYear); })
            .attr("width", xScale.bandwidth() - 2)
            .attr("y", function (d) { return yScale(d.sightingCount); })
            .attr("height", function (d) { return height - yScale(d.sightingCount); });

        //label the bars
        svg.selectAll("text")
            .data(data)
            .enter()
            .append("text")
            .text(function (d) { return d.sightingCount; })
            .attr("x", function (d) { return xScale(d.sightingYear) + xScale.range() / 2; })
            .attr("y", function (d) { return yScale(d.sightingCount) + 12; })
            .style("fill", "white");





        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);


        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
        //.append("text")
        //.attr("transform", "rotate(-90)")
        //.attr("y", -36)
        //.attr("dy", ".71em")
        //.style("text-anchor", "end")
        //.text("Salary");

    });





</script>

在许多在线示例中我需要为我工作的部分是“//label the bars”所在的位置

Answer 1

您正在使用 scaleBand。所以，不是range()，而是bandwidth():

 svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function (d) { return d.sightingCount; })
        .attr("x", function (d) { return xScale(d.sightingYear) + xScale.bandwidth() / 2; })
        .attr("y", function (d) { return yScale(d.sightingCount) + 12; })
        .style("fill", "white");