• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

194
Views
Adición de varios grupos al gráfico D3 radial

Lo siento si el título es engañoso. Básicamente tengo el siguiente gráfico d3:

gráfico de barras radiales d3

Que se basa en una matriz de 5 elementos, cada uno de los cuales contiene 3 valores separados. Como puede ver, el gráfico radial se agrupa en 5 secciones (con un espacio) y luego cada sección contiene los 3 valores separados como gráficos de barras.

Aquí hay un violín js: https://jsfiddle.net/kpu5o7v2/ Y mis datos:

 [ { index: 0, name: "John", red: 35, green: 16, blue: 56 }, { index: 1, name: "Spencer", red: 12, green: 34, blue: 8 }, { index: 2, name: "Alice", red: 6, green: 6, blue: 70 }, { index: 3, name: "Cat", red: 12, green: 80, blue: 1 }, { index: 4, name: "Dave", red: 80, green: 1, blue: 2 } ]

Lo que quiero saber es cómo puedo agregar secciones para que se correspondan con el valor new_data.name. es decir. los grupos más amplios. Entonces puedo diseñarlos individualmente Entonces, por ejemplo, para "John":

  • el ángulo de inicio es 0
  • el ángulo final es el mismo ángulo final que la sección azul de John
  • el radio es un número > la subsección más grande.

A continuación se muestra un ejemplo (si le diera un golpe a este grupo):

ingrese la descripción de la imagen aquí

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Descubrí la respuesta a esto:

  • Necesitamos agregar una nueva g al SVG con el mismo new_data nuevamente
  • Cree un nuevo objeto de arco para los nombres ("John", "Spencer", etc.) en lugar de las teclas ("rojo", "verde", "azul")
  • El radio es y(ymax) donde ymax es el valor más grande en todos los datos
  • el ángulo de inicio es solo x0 (nombre) (en una escala de 0 a 2PI)
  • el ángulo final es el mismo que el anterior + el ancho. Que es circunferencia/número de nombres.
 let arc2 = d3.arc() .innerRadius(innerRadius) .outerRadius((d) => { return y(ymax); }) .startAngle(d => { return x0(d.name) }) .endAngle(d => { //let circumference = 2* Math.PI; //let bandwidth = circumference/names.length; let endAngle = x0(d.name) + (x0.bandwidth() * 0.8); return endAngle; }) .padAngle(0.01) .padRadius(innerRadius); svg.append("g") .selectAll("path") .data(new_data) .enter() .append("path") .attr('fill', d => { return "none"; }) .attr("stroke", "#333") .attr("stroke-width", 2) .attr("d", arc2);

Nuevo violín JS: https://jsfiddle.net/kpu5o7v2/1/

Resultado: ingrese la descripción de la imagen aquí

about 3 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 Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error