Values on top of bars

2020-05-02 03:42发布

站内问答 / JavaScript
1247 0 4

I'm trying to display values on top of the bars in d3 js. There is a X-axis scroll bar with sub bars like thumbnails. The values are not changing when I scroll x-axis. And the x-axis scrolls using drag function, how can I add click function to the X-axis scrollbar?

Here is my codepen that I tried: https://codepen.io/sampath-PerOxide/pen/MZBOmG

        var ds1 = [
        {label:"Company Average", value:"20"},
        {label:"Banking & Finance", value:"10"},
        {label:"Research & Development", value:"40"},
        {label:"Design & Innovaon", value:"20"},
        {label:"Sales & Marketing", value:"10"},
        {label:"Company Average1", value:"20"},
        {label:"Banking & Finance1", value:"10"},
        {label:"Research & Development1", value:"40"},
        {label:"Design & Innovaon1", value:"20"},
        {label:"Sales & Marketing1", value:"10"},
        {label:"Company Average2", value:"20"},
        {label:"Banking & Finance2", value:"10"},
        {label:"Research & Development2", value:"40"},
        {label:"Design & Innovaon2", value:"20"},
        {label:"Sales & Marketing2", value:"10"},
        {label:"Company Average3", value:"20"},
        {label:"Banking & Finance3", value:"10"},
        {label:"Research & Development3", value:"40"},
        {label:"Design & Innovaon3", value:"20"},
        {label:"Sales & Marketing3", value:"10"},
        {label:"Company Average4", value:"20"},
        {label:"Banking & Finance4", value:"10"},
        {label:"Research & Development4", value:"40"},
        {label:"Design & Innovaon4", value:"20"},
        {label:"Sales & Marketing4", value:"10"},
        {label:"Company Average5", value:"20"},
        {label:"Banking & Finance5", value:"10"},
        {label:"Research & Development5", value:"40"},
        {label:"Design & Innovaon5", value:"20"},
        {label:"Sales & Marketing5", value:"10"},

        ];

        var ds2 = [
        {label:"Company Average", value:"10"},
        {label:"Banking & Finance", value:"30"},
        {label:"Research & Development", value:"20"},
        {label:"Design & Innovaon", value:"40"},
        {label:"Sales & Marketing", value:"10"},
        {label:"Company Average1", value:"30"},
        {label:"Banking & Finance1", value:"20"},
        {label:"Research & Development1", value:"40"},
        {label:"Design & Innovaon1", value:"20"},
        {label:"Sales & Marketing1", value:"10"},
        {label:"Company Average2", value:"20"},
        {label:"Banking & Finance2", value:"10"},
        {label:"Research & Development2", value:"40"},
        {label:"Design & Innovaon2", value:"20"},
        {label:"Sales & Marketing2", value:"10"},
        {label:"Company Average3", value:"20"},
        {label:"Banking & Finance3", value:"10"},
        {label:"Research & Development3", value:"40"},
        {label:"Design & Innovaon3", value:"20"},
        {label:"Sales & Marketing3", value:"10"},
        {label:"Company Average4", value:"20"},
        {label:"Banking & Finance4", value:"10"},
        {label:"Research & Development4", value:"40"},
        {label:"Design & Innovaon4", value:"20"},
        {label:"Sales & Marketing4", value:"10"},
        {label:"Company Average5", value:"20"},
        {label:"Banking & Finance5", value:"10"},
        {label:"Research & Development5", value:"40"},
        {label:"Design & Innovaon5", value:"20"},
        {label:"Sales & Marketing5", value:"10"},

        ];
        var ds3 = [
        {label:"Company Average", value:"40"},
        {label:"Banking & Finance", value:"10"},
        {label:"Research & Development", value:"30"},
        {label:"Design & Innovaon", value:"10"},
        {label:"Sales & Marketing", value:"20"},
        {label:"Company Average1", value:"30"},
        {label:"Banking & Finance1", value:"5"},
        {label:"Research & Development1", value:"30"},
        {label:"Design & Innovaon1", value:"20"},
        {label:"Sales & Marketing1", value:"10"},
        {label:"Company Average2", value:"20"},
        {label:"Banking & Finance2", value:"10"},
        {label:"Research & Development2", value:"40"},
        {label:"Design & Innovaon2", value:"20"},
        {label:"Sales & Marketing2", value:"10"},
        {label:"Company Average3", value:"20"},
        {label:"Banking & Finance3", value:"10"},
        {label:"Research & Development3", value:"40"},
        {label:"Design & Innovaon3", value:"20"},
        {label:"Sales & Marketing3", value:"10"},
        {label:"Company Average4", value:"20"},
        {label:"Banking & Finance4", value:"10"},
        {label:"Research & Development4", value:"40"},
        {label:"Design & Innovaon4", value:"20"},
        {label:"Sales & Marketing4", value:"10"},
        {label:"Company Average5", value:"20"},
        {label:"Banking & Finance5", value:"10"},
        {label:"Research & Development5", value:"40"},
        {label:"Design & Innovaon5", value:"20"},
        {label:"Sales & Marketing5", value:"10"},

        ];

        var margin =  {top: 20, right: 10, bottom: 20, left: 40};
        var marginOverview = {top: 30, right: 10, bottom: 20, left: 40};
        var selectorHeight = 40;
        var width = 1100 - margin.left - margin.right;
        var height = 400 - margin.top - margin.bottom - selectorHeight;
        var heightOverview = 80 - marginOverview.top - marginOverview.bottom;

        var svg = d3.select("#atthbd").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom + selectorHeight);

        var diagram = svg.append("g")
             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        function updateLegend(data) { 


        var maxLength = d3.max(data.map(function(d){ return d.label.length}))
        var barWidth = maxLength * 7;
        var numBars = Math.round(width/barWidth);
        var isScrollDisplayed = barWidth * data.length > width;


        console.log(isScrollDisplayed)

        var xscale = d3.scale.ordinal()
        .domain(data.slice(0,numBars).map(function (d) { return d.label; }))
        .rangeBands([0, width], .7);

        var yscale = d3.scale.linear()
        .domain([0, 40])
        .range([height, 0]);

        var xAxis  = d3.svg.axis().scale(xscale).orient("bottom");
        var yAxis  = d3.svg.axis().scale(yscale).orient("left");
        var tip2 = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d2) {
        return "<p class='sec-sub-head'>Avg No.of days:" + d2.value + "</p>";
        })
        svg.call(tip2);

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

        diagram.append("g")
        .attr("class", "y axis")
        .call(yAxis)    .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Average No. of days");
        /*
        */


        var bars = diagram.append("g");

        bars.selectAll("rect")
        .data(data.slice(0, numBars), function (d) {return d.label; })
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function (d) { return xscale(d.label); })
        .attr("y", function (d) { return yscale(d.value); })
        .attr("width", xscale.rangeBand())
        .attr("height", function (d) { return height - yscale(d.value); }) 
        .on('mouseover', tip2.show)
        .on('mouseout', tip2.hide)

        ;
        bars.selectAll("bars")
        .data(data.slice(0, numBars), function (d) {return d.label; })
        .enter().append("text")
        .attr("class", "bar")
        .attr("text-anchor", "middle")
        .attr("x", function(d) { return xscale(d.label) + xscale.rangeBand()/2; })
        .attr("y", function(d) { return yscale(d.value) - 5; })
        .text(function(d) { return d.value; });


        if (isScrollDisplayed)
        {
        var xOverview = d3.scale.ordinal()
        .domain(data.map(function (d) { return d.label; }))
        .rangeBands([0, width], .2);
        yOverview = d3.scale.linear().range([heightOverview, 0]);
        yOverview.domain(yscale.domain());

        var subBars = diagram.selectAll('.subBar')
        .data(data)

        subBars.enter().append("rect")
        .classed('subBar', true)
        .attr({
        height: function(d) {
        return heightOverview - yOverview(d.value);
        },
        width: function(d) {
        return xOverview.rangeBand()
        },
        x: function(d) {

        return xOverview(d.label);
        },
        y: function(d) {
        return height + heightOverview + yOverview(d.value)
        }
        })

        var displayed = d3.scale.quantize()
        .domain([0, width])
        .range(d3.range(data.length));

        diagram.append("rect")
        .attr("transform", "translate(0, " + (height + margin.bottom) + ")")
        .attr("class", "mover")
        .attr("x", 0)
        .attr("y", 0)
        .attr("height", selectorHeight)
        .attr("width", Math.round(parseFloat(numBars * width)/data.length))
        .attr("pointer-events", "all")
        .attr("cursor", "ew-resize")
        .call(d3.behavior.drag().on("drag", display))

        ;


        }
        function createsGrid(data) {
        var grid = gridLine.selectAll("line.horizontalGrid").data(scaleY.ticks());

        grid.enter()
        .append("line")
        .attr("class","horizontalGrid");

        grid.exit().remove();

        grid.attr({
        "x1":0,
        "x2": width,
        "y1": function (d) { return yscale(d); },
        "y2": function (d) { return yscale(d); }
        });
        }

        function display () {
        var x = parseInt(d3.select(this).attr("x")),
        nx = x + d3.event.dx,
        w = parseInt(d3.select(this).attr("width")),
        f, nf, new_data, rects;

        if ( nx < 0 || nx + w > width ) return;

        d3.select(this).attr("x", nx);

        f = displayed(x);
        nf = displayed(nx);

        if ( f === nf ) return;

        new_data = data.slice(nf, nf + numBars);

        xscale.domain(new_data.map(function (d) { return d.label; }));
        diagram.select(".x.axis").call(xAxis);

        rects = bars.selectAll("rect")
        .data(new_data, function (d) {return d.label; });

        rects.attr("x", function (d) { return xscale(d.label); });

        //    rects.attr("transform", function(d) { return "translate(" + xscale(d.label) + ",0)"; })

        rects.enter().append("rect")
        .attr("class", "bar")
        .attr("x", function (d) { return xscale(d.label); })
        .attr("y", function (d) { return yscale(d.value); })
        .attr("width", xscale.rangeBand())
        .attr("height", function (d) { return height - yscale(d.value); })
        .on('mouseover', tip2.show)
        .on('mouseout', tip2.hide)

        ;
        /*
        bars.selectAll(".bars")
        .data(data)
        .enter().append("text")
        .attr("class", "bar")
        .attr("text-anchor", "middle")
        .attr("x", function(d) { return xscale(d.label) + xscale.rangeBand()/2; })
        .attr("y", function(d) { return yscale(d.value) - 5; })
        .text(function(d) { return d.value; });
        */

        rects.exit().remove();
        };

        }

        // generate initial legend
        updateLegend(ds1);

        // handle on click event
        d3.select('#opts')
        .on('change', function() {
        $( "svg g" ).empty();
        var data = eval(d3.select(this).property('value'));
        updateLegend(data);
        });

How can I display values on the top of the bars even after scrolling and horizontal gridlines for the SVG.

0条回答
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)