D3 bar chart needs to add arrow and text in particular bar

Question

Hello , I am using d3.js bar chart. I want to display arrow and text for particular bar.I attached the image and code.

  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
        };
    }

I am getting output like this.

I want to output(arrow and text) like following this.

How to add arrow and the text(class average) in the particular bar like on blue bar of top. I have no idea for this. help me for this.

Answer 1

This example shows you how to make lines with arrows. After that, it's relatively straightforward. All you need to do is to add text and line at the appropriate position, eg by filtering the data to contain only the element you want. The following code does that for the text:

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");

Adding the line is basically the same. Complete example here .