条形图顶部的值不会随条形图移动

时间：2019-01-21 06:04:49

标签： javascript jquery angularjs d3.js graph

我正在尝试创建一个条形图，该条形图的x轴滚动和条形图的值位于条形图的顶部。这些值正在显示，但在滚动x轴后，这些值并未随条形移动。

我尝试删除附加的文本，但无法正常工作。 这是我的完整代码：https://codepen.io/sampath-PerOxide/pen/MZBOmG 

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
<meta name="viewport" content="width=device-width, initial-scale=0.5">

       
        <meta name="description" content="">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">


    </head>
    <body>
                        <div class="row ">
                
            <div class="col-md-12 bg-white">
                <div style="float: left;">
            <h5 class="section-heading">Average</h5></div>
                                <div style="float: right;">
                         <select class="form-control" id="opts">
        <option value="ds1">A</option>
        <option value="ds2">B</option>
        <option value="ds3">C</option>
      </select>
          </div>

            <div id="atthbd"></div>

                </div>
            </div>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="d3pie.js"></script>
<!--        <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>-->
<!--        <script src="https://d3js.org/d3.v4.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        
        <script>
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");
/*
*/

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

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)

    ;

		                  
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("rects")
      .data(data)
    .enter().append("text")
      .attr("class", "bar")
      .attr("text-anchor", "middle")
      .attr("x", function(d) { return xscale(d.label)})
      .attr("y", function(d) { return yscale(d.value) - 5; })
      .text(function(d) { return d.value; });


/*
  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);
});
            
        </script>
    </body>
</html>

滚动时如何隐藏栏顶部的值。

enter image description here

1 个答案:

答案 0 :(得分：1)

您需要将文本标签绑定到数据，就像处理条形一样。然后，您可以在更新功能中更新所选内容（以及位置和文本）的数据。

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;

  var xscale = d3.scale
    .ordinal()
    .domain(
      data.slice(0, numBars).map(function(d) {
        return d.label;
      })
    )
    .rangeBands([0, width], 0.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 bartext = diagram
    .append("g")
    .attr("class", "bar-texts")
    .selectAll(".bar-text")
    .data(data.slice(0, numBars));

  var barTextEnter = bartext
    .enter()
    .append("text")
    .attr("class", "bar-text")
    .attr("x", function(d) {
      return xscale(d.label);
    })
    .attr("y", function(d) {
      return yscale(d.value) - 5;
    })
    .text(function(d) {
      return d.value;
    })
    .attr("text-anchor", "middle");

  var bars = diagram.append("g").attr("class", "bars");

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

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

    var subBars = diagram
      .append("g")
      .attr("class", "sub-bars")
      .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 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
      .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);

    bartext
      .data(new_data)
      .attr("x", function(d) {
        return xscale(d.label);
      })
      .attr("y", function(d) {
        return yscale(d.value) - 5;
      })
      .text(function(d) {
        return d.value;
      });

    bartext.exit().remove();
    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);
});
<div class="row">
  <div class="col-md-12 bg-white">
    <div style="float: left;">
      <h5 class="section-heading">Average</h5>
    </div>
    <div style="float: right;">
      <select class="form-control" id="opts"><option value="ds1">A</option><option value="ds2">B</option><option value="ds3">C</option></select>
    </div>
    <div id="atthbd"></div>
  </div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

Codepen

相关问题
最新问题