D3条形图需要在特定栏中添加箭头和文字

Question

您好，我正在使用d3.js条形图。 我想显示特定栏的箭头和文字。我附上了图片和代码。

  var dataset = [{ "keyword": "0-10", "global": 500, }, { "keyword": "11-20", "global": 300, }, { "keyword": "21-30", "global": 90, }, { "keyword": "31-40", "global": 400, }, { "keyword": "41-50", "global": 600, }, { "keyword": "51-60", "global": 100, }, { "keyword": "61-70", "global": 560, }, { "keyword": "71-80", "global": 256, }, { "keyword": "81-90", "global": 198, }, { "keyword": "91-100", "global": 233, }];

    Graph(dataset);
    function Graph(input) {
        var margin = {
            top: 15,
            right: 10,
            bottom: 60,
            left: 60
        }, w = 400
            h = 220 - margin.top - margin.bottom;
        var padding = 10;

        // update the margin based on the title size
        var titleSize = measure("Title of Diagram", "title");
        margin.top = titleSize.height + 20;

        //Create X Scale for bar graph
        var xScale = d3.scale.ordinal().domain(input.map(function (d) {
            return d.keyword;
        })).rangeRoundBands([0, w], 0.05);

        //Create Y Scale for bar graph
        var yScale = d3.scale.linear().domain([0, d3.max(input, function (d) {
            return d.global;
        })]).range([h, 0]);

        //Create X Axis
        var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

        //Create Y Axis
        var yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5);

        //Create SVG element
        var svg = d3.select("#dashboard-collection-bar-graph").append("svg").attr("width", w + margin.left + margin.right).attr("height", h + margin.top + margin.bottom).append('g').attr("viewBox", "0 0 100 100").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //Create X axis
        svg.append("g").attr("class", "axis x").attr("transform", "translate(0," + h + ")").call(xAxis).style("fill", "#515151");;

        //Create Title
        //svg.append("text").attr("x", w / 2).attr("y", -titleSize.height  + 10).attr("class", "title").style("text-anchor", "middle").text("Title of Diagram");

        //Create X axis label
        svg.append("text").attr("x", w / 1.2).attr("y", h + margin.bottom - 10).style("text-anchor", "middle").style("fill", "#515151").style("font-family", "arial").style("font-size", "12px").text("Grade Range (%)");
        //Create Y axis
        svg.append("g").attr("class", "axis y").call(yAxis).style("fill", "#515151");

        //Create Y axis label
        svg.append("text").attr("transform", "rotate(-90)").attr("y", 10 - margin.left).attr("x", 0 - (h / 2)).attr("dy", "1em").style("text-anchor", "middle").style("fill", "#515151").style("font-family", "arial").style("font-size", "12px").text("Number of Students");

        //Add rectangles

        svg.selectAll(".bar").data(input).enter().append("rect").attr("class", "bar")
        //.style("fill", "red")
        .attr("fill", function (d) {
            var getValue = d.global;
            if (getValue == 600) {
                return "#1076BB";
            } else {
                return "#88bbdd";
            }
        }).attr("x", function (d) {
            return xScale(d.keyword);
        }).attr("y", function (d) {
            return yScale(d.global)
        }).attr("width", xScale.rangeBand()) //returns rangeRoundBands width
        .attr("height", function (d) {
            return h - yScale(d.global)
        });

    }; // end Graph function

    // create a dummy element, apply the appropriate classes,
    // and then measure the element
    function measure(text, classname) {
        if (!text || text.length === 0)
            return {
                height: 0,
                width: 0
            };

        var container = d3.select('body').append('svg').attr('class', classname);
        container.append('text').attr({
            x: -1000,
            y: -1000
        }).text(text);

        var bbox = container.node().getBBox();
        container.remove();

        return {
            height: bbox.height,
            width: bbox.width
        };
    }

我得到这样的输出。

我想输出（箭头和文字），如下所示。

如何在特定栏中添加箭头和文字（班级平均值），例如在顶部的蓝色条上。我不知道这个。帮助我。

Answer 1

This example向您展示如何使用箭头制作线条。在那之后，它相对简单。您需要做的就是在适当的位置添加文本和行，例如通过过滤数据以仅包含所需的元素。以下代码对文本执行此操作：

svg.selectAll("text.label")
        .data(input.filter(function(d) { return d.global == 600; }))
        .enter().append("text")
        .attr("class", "label")
        .attr("x", function (d) {
            return xScale(d.keyword) + xScale.rangeBand()/2;
        }).attr("y", function (d) {
            return yScale(d.global) - 25;
        })
        .style("text-anchor", "middle")
        .text("Class average");

添加线基本相同。完整示例here。