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

我是d3.js的新手，我正在尝试根据单击GenerateEnumber函数时生成的数值，将图像放置在它对应的位置。显然，如果值为100，则它必须位于条的最高部分，否则if在最低部分为零。我打算根据条的大小使其动态化

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

这是我的现场代码：

---

如何操作？

如果要在ImageIndicator前面添加文本，可以附加文本，然后在GenerateEnumber函数中更改属性和文本，基本上与对ImageIndicator所做的相同。 一个有效的例子

我还修改了你的一些代码

在您的例子中，maxRange是410，而根据生成的矩形，maxRange是600。 我删除了图像的比例0.5，因为我可以将宽度和高度设置为15px。如果尝试缩放，请注意变换原点。

---

嗨，我不知道你想要什么。那么，你是想把数字文本放在条顶上吗？还是在Indicator旁边？@soundquiet他想把数字文本放在Indicator旁边这正是我要找的！非常感谢。我还有最后两个疑问，希望我不会打扰你。为什么您知道maxRange必须等于410？我正在尝试将代码迁移到d3.js的版本5，我将d3.scale.linear替换为d3.scaleLinear，但什么都没有发生。。谢谢你的帮助help@yavg对于410，我只是在inspect中看到它，最后一个矩形的y是400，宽度是10，所以条的底部是410。对于v5，您能给出一个代码示例吗？太好了！非常感谢，这就是问题所在，在我的实际项目中，我有v5，如果我按照我告诉你的做，我不会出错，但它也不起作用。这把小提琴有v5@yavg哦，把rect的属性一一列出，这样可以解决这个问题。selection.attrobject不再工作

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