javascript - 基于数据javascript在一个栏顶部添加文本和图像

Question

嗨，我尝试为许多人创建这个条形图（就像每个人都会得到一个个性化的条形图）。X 轴是一个数字，y 是人数。如果某人的数字是 1，则 1 的条形将以不同的颜色突出显示。我想在栏的顶部添加另一个文本和图像（在本例中为 x=1）以使其更明显。该文本和图像将根据条形图的变化改变位置（如果第二个人的轴值为 5，则文本和图像将位于条形图 5 的顶部）。这是我用于颜色更改的代码，任何人都可以帮助添加文本和图像吗？

 <script type="text/javascript">


 //variable that will determine barchart color in report
 //barcolor_std function code is further below
 var barcolor = barcolor_std(stddev);
 //setup area for barchart
 var margin = {top: 40, right: 20, bottom: 55, left: 139},
     width = 870 ,
     height = 600 - margin.top - margin.bottom;
 var formatPercent = d3.format(".0%");
 var x = d3.scale.ordinal()
     .rangeRoundBands([0, width-75], .3);
 var y = d3.scale.linear()
     .range([height, 0]);
 var xAxis = d3.svg.axis()
     .scale(x)
     .orient("bottom");
 var yAxis = d3.svg.axis()
     .scale(y)
     .orient("left")
     .tickFormat(d3.format(".0f"));
 var tip = d3.tip()
   .attr('class', 'd3-tip')
   .offset([-10, 0])
   .html(function(d) { return "# of ppts: " + d.number_ppt_2019_m2; });
 var svg = d3.select("body")
   .append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
   .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 svg.call(tip);


 //import csv file to create barchart
 d3.csv("bar1.csv", type, function(error, data) {
   //set up what barchart will look like
   x.domain(data.map(function(d) { return d.category_2019_m2; }));
   //edit y-axis max here
   y.domain([0, d3.max(data, function(d) { return d.number_ppt_2019_m2; })+0.92]);
   svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + height + ")")
       .call(xAxis)
       .selectAll("text")
       .attr("y", 0)
       .attr("x", 9)
       .attr("dy", ".35em")
       .attr("transform", "rotate(70)")
       .style("text-anchor", "start");
   svg.append("g")
       .attr("class", "y axis")
       .call(yAxis)
       .append("text")
       .attr("transform", "rotate(-90)")
       .attr("y", -60)
       .attr("x",-170)
       .attr("dy", ".71em")
       .style("text-anchor", "end")
       .text("# of ppts")
       .style("font-size", "22px");
   svg.selectAll(".bar")
       .data(data)
     .enter().append("rect")
       .attr("class", "bar")
       .attr("x", function(d) { return x(d.category_2019_m2); })
       .attr("width", x.rangeBand())
       .attr("y", function(d) { return y(d.number_ppt_2019_m2); })
       .attr("height", function(d) { return height - y(d.number_ppt_2019_m2); })
       .on('mouseover', tip.show)
       .on('mouseout', tip.hide)

       if (mean_cat==1.0){
         d3.selectAll(".bar").style("fill", function(d){if(d.category_2019_m2=="1.0") {return barcolor}})
      } else if (mean_cat==1.1){
         d3.selectAll(".bar").style("fill", function(d){if(d.category_2019_m2=="1.1") {return barcolor}})
       } else if (mean_cat==1.2){
         d3.selectAll(".bar").style("fill", function(d){if(d.category_2019_m2=="1.2") {return barcolor}})
       } else if (mean_cat==1.3){
         d3.selectAll(".bar").style("fill", function(d){if(d.category_2019_m2=="1.3") {return barcolor}})
       } else if (mean_cat==1.4 ){
         d3.selectAll(".bar").style("fill", function(d){if(d.category_2019_m2=="1.4") {return barcolor}})
       } else if (mean_cat==1.5 ){
         d3.selectAll(".bar").style("fill", function(d){if(d.category_2019_m2=="1.5") {return barcolor}})
       } else if (mean_cat==1.6 ){
         d3.selectAll(".bar").style("fill", function(d){if(d.category_2019_m2=="1.6") {return barcolor}})
       } 
       });// end of csv file code


 function type(d) {
   d.number_ppt_2019_m2 = +d.number_ppt_2019_m2;
   return d;
 }

 function barcolor_std(stddev){
     if (stddev=="within 1 std"){
     return "#8ec549" ;
   } else if (stddev=="between 1-2 std") {
     return "#ffd954";
   } else if (stddev=="above 2 std") {
     return "#ed1c24";
   }
 }


 </script> <!-- end of d3.js/javascript for barchart -->

标签： javascriptphpcssfunctionsvg