Блог

Я новичок в мире d3.js и я пытаюсь, чтобы в зависимости от числового значения, генерируемого при нажатии на generateNumber функцию, изображение помещалось туда, где оно соответствует. Очевидно, что если значение равно 100, оно должно быть в самой верхней части строки, а в противном случае, если оно равно нулю в самой нижней части. Я намерен сделать это динамическим в зависимости от размера панели.

Если это не слишком сложно, я хотел бы поместить текст перед изображением, указывающий число, сгенерированное функцией.

это мой текущий код: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");*/
  

Как я могу это сделать?

Если вы хотите поместить текст перед изображением (#indicador), вы можете добавить text , а затем изменить attr y и text в generateNumber() функции, в основном так же, как вы сделали с изображением (#indicador). Вот рабочий пример.

Также я изменил некоторый код из вашего.

1. maxRange в вашем случае это 410, а не 600 в соответствии с сгенерированными прямоугольниками.
2. Я удалил scale(0.5) изображения, так как я могу просто установить ширину и высоту в 15 пикселей. Если вы пытаетесь масштабировать, позаботьтесь о начале преобразования.