Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

387
Views
Insertar un texto encima del componente rect en un svg usando d3

Tengo que poner texto encima de los rectángulos en un gráfico de barras apiladas en d3.js. Tengo que insertar el texto exactamente como se indica en la imagen adjunta a continuación en lugar de los caracteres 'x'. ¿Cómo podría hacer? ingrese la descripción de la imagen aquí

Este es mi código que crea el svg.

 chartRealModel = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .selectAll("g") .data(seriesRealModel) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => xRealModel(d.data.Week)) .attr("y", d => yRealModel(d[1])) .attr("height", d => yRealModel(d[0]) - yRealModel(d[1])) .attr("width", xRealModel.bandwidth()) .append("title") .text(d => `${d.key} ${formatValue(d.data[d.key])}`); svg.selectAll("rect") svg.append("g") .call(xAxisRealModel); svg.append("g") .call(yAxisRealModel); return svg.node();
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

prácticamente haces lo mismo que hiciste para crear las barras, pero en cambio con el texto

 svg.append("g") .selectAll("label") .data(seriesRealModel) .join('text') .text( d => `${d.key}${formatValue(d.data[d.key])}`); // positioning the text in the middle of the bar .attr('x', d => xRealModel(d.data.Week) + xRealModel.bandwidth() /2) // positioning on the top of the bar .attr('y',d => yRealModel(d[1]) -5) .attr("fill", "black")
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!