如何使元素根据其值将自身放置在条形图的顶部?

我是新来的 d3.js 我正在尝试,这取决于点击 generateNumber 函数中,图像被放置在相应的位置。显然,如果值为100,则它必须位于条的最高部分,否则if在最低部分为零。我打算根据吧台的大小来进行动态调整。

如果不太麻烦的话,我想在图像前面放一个文本,指示函数生成的数字。

这是我的现场代码: https://jsfiddle.net/891vzjct/1/

<div id="visualization"></div>
  <button onclick="generateNumber()">
   Generate number
  </button>
</div>


function generateNumber(){
  let number=Math.floor(Math.random() * 101);;
  console.log(number);
  console.log(yScale(number));
  d3.select("#indicador").attr("y",yScale(number));
}

let heightRectangle=10;
d3.select("#visualization").append('svg')
var vis = d3.select("svg").attr("width",800).attr("height",614).style("border","1px solid red");

 vis.append("image")
     .attr("id","indicador")
    .attr("href","https://www.shareicon.net/data/256x256/2015/08/17/86784_left_512x512.png")
    .attr("width",30)
    .attr("height",30)
    .style("transform","scale(0.5) translate(113px)")



//Doing my color bar
var arr = d3.range(101)
let maxRange=600;
var yScale = d3.scale.linear().domain([0, 100]).range([maxRange,0])

var colorScale = d3.scale.linear().domain([0,50,100])
    .range(["green", "yellow", "red"])

vis.selectAll('rect').data(arr).enter()
    .append('rect')
    .attr({
        y : function(d,i) {  console.log(d,yScale(d)); return i*+4 },
        x : 20,
        height: heightRectangle,
        width: 40,
        fill: function(d) { return colorScale(d) }
    });


    /*
    var y = d3.scale.linear()
      .range([300, 0])
      .domain([100, 0]);

    var yAxis = d3.axisBottom()
      .scale(y)
      .ticks(5);

    vis.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(0,30)")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("axis title");*/

我该怎么做?