es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

D3 Sunburst – Cómo asignar un color personalizado a una ruta

En este momento estoy construyendo un componente D3 Sunburst Vue y estoy usando el paquete npm vue-d3-sunburst para eso. La documentación para el paquete se puede encontrar aquí:

https://www.npmjs.com/package/vue-d3-sunburst

La documentación dice que hay una función get-category-for-color que se usa para asignar un elemento y su color de esta manera:
(nodeD3: Object) => category: Number | String Por defecto, usar el nombre del nodo

En este momento no puedo entender cómo obtener el valor de color de cada nodo aplicado a cada ruta y me pregunto si alguien puede ayudarme?

const {
sunburst,
highlightOnHover
} = window[‘vue-d3-sunburst’];
window.Vue.config.productionTip = false;

/**
* Componente FlavorWheel.
*/
new window.Vue({
el: “#app”,
name: “flavor-wheel”,
components: {
highlightOnHover,
sunburst,
},
props: {
/**
* Notas de cata.
*/
cuppingNotes: {
type: Object,
default () {
return {
name: “base”,
children: [{
name: “Fruity”,
color: “#da1f24”,
children: [{
name: “Berry”,
color: “#de4b52”,
children: [{
name: “Blackberry”,
color: “#3e0316”,
size: 1,
},
{
name: “Blueberry”,
color: “#6469af”,
size: 1,
},
],
},
{
name: “Frutas secas”,
color: “#ca4a44”,
children: [{
name: “Uva pasa”,
color: “#b43b54”,
size: 1,
},
{
name: “Ciruela pasa”,
color: “#a4456e”,
size: 1,
},
],
},
{
name: “Otras frutas”,
color: “#f2684b”,
children: [{
name: “Cereza”,
color: “#e73351”,
size: 1,
},
{
name: “Piña”,
color: “#f99a18”,
size: 1,
},
{
name: “Durazno”,
color: “#f68a5b”,
size: 1,
},
],
},
],
},
{
name: “Agrio/Fermentado”,
color: “#ebb20f”,
children: [{
name: “Ácido”,
color: “#e1c217”,
children: [{
name: “Alcohol/Fermentado”,
color: “#9fa81a”,
size: 1,
},
{
name: “Ácido cítrico”,
color: “#f9ee01”,
size: 1,
},
],
}, ],
},
],
};
},
},
},
data() {
return {
data: this.cuppingNotes,
};
},
methods: {
/**
* Función utilizada para asignar un elemento y su color
*/
getColorValue() {},
},
template: <div class="container">
<sunburst class="flavor-wheel" :data="data" :showlabels="true" :centralcirclerelativesize="10" :getcategoryforcolor="getColorValue()">
<template slot-scope="{ on, actions }">
<highlightonhover v-bind="{ on, actions }"></highlightonhover>
</template>
</sunburst>
</div>

});

.flavor-wheel {
width: 500px !important;
height: 500px !important;
margin: 0 auto;
}

.flavor-wheel text {
fill: #fff;
}


Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Tengo problemas para entender cómo utilizar la función “get-category-for-color” para mapear un ítem y su color. ¿Alguien tiene algún consejo sobre cómo hacer esto?

Comments are closed.