Currently, I am in the process of developing a D3 Sunburst Vue component and utilizing the npm package vue-d3-sunburst for this purpose. To access the documentation for the package, please visit:
https://www.npmjs.com/package/vue-d3-sunburst
The documentation mentions a get-category-for-color function that is utilized to associate an item with its color as follows:
(nodeD3: Object) => category: Number | String By default use the node nameI seem to be struggling at the moment trying to extract the color value of each node that is applied to every path. Can anyone assist me with this?
const {
sunburst,
highlightOnHover
} = window['vue-d3-sunburst'];
window.Vue.config.productionTip = false;
/**
* FlavorWheel Component.
*/
new window.Vue({
el: "#app",
name: "flavor-wheel",
components: {
highlightOnHover,
sunburst,
},
props: {
/**
* Cupping notes.
*/
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: "Dried fruit",
color: "#ca4a44",
children: [{
name: "Raisin",
color: "#b43b54",
size: 1,
},
{
name: "Prune",
color: "#a4456e",
size: 1,
},
],
},
{
name: "Other fruit",
color: "#f2684b",
children: [{
name: "Cherry",
color: "#e73351",
size: 1,
},
{
name: "Pineapple",
color: "#f99a18",
size: 1,
},
{
name: "Peach",
color: "#f68a5b",
size: 1,
},
],
},
],
},
{
name: "Sour/Fermented",
color: "#ebb20f",
children: [{
name: "Sour",
color: "#e1c217",
children: [{
name: "Alcohol/Fermented",
color: "#9fa81a",
size: 1,
},
{
name: "Citric acid",
color: "#f9ee01",
size: 1,
},
],
}, ],
},
],
};
},
},
},
data() {
return {
data: this.cuppingNotes,
};
},
methods: {
/**
* A function used to map an item and its 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 }" />
</template>
</sunburst>
</div>
`
});.flavor-wheel {
width: 500px !important;
height: 500px !important;
margin: 0 auto;
}
.flavor-wheel text {
fill: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285e5d4d054c1b055b5d464a5d5a5b5c681906110619">[email protected]</a>/dist/vue-d3-sunburst.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f88e8d9dd59ccbd58b8d969a8d8a8b8cb8c9d6c1d6c9">[email protected]</a>/dist/vue-d3-sunburst.css">
<div id="app"></div>