D3 Sunburst - 如何将自定义颜色映射到路径
D3 Sunburst - How to map custom color to path
我目前正在构建一个 D3 Sunburst Vue
组件,我正在为此使用 npm 包 vue-d3-sunburst
。可以在此处找到该软件包的文档:
https://www.npmjs.com/package/vue-d3-sunburst
文档说有一个 get-category-for-color
函数用于映射项目及其颜色,如下所示:
(nodeD3: Object) => category: Number | String By default use the node name
我在这里完全没有时间,只是不知道如何获取应用于每条路径的每个节点的颜色值,我想知道是否有人可以提供帮助?
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: {
/**
* 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/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.css">
<div id="app"></div>
我对 Vue 不是很熟悉,但我很确定问题如下:
您需要将其作为 属性 传递,而不是调用 HTML 中的函数。不同的是,如果你加上括号,函数的 result 将被传递给 VueJS,而不是函数本身。然后,您将能够按照您期望的方式访问函数的参数。
编辑
这个名字getCategoryForColor
应该已经告诉我了,但实际上发生的事情并不是你所期望的。 getCategoryForColor
函数期望接收表示单元格所属“类别”的任何字符串或值。然后将这些类别映射到 colorScale
函数,该函数确保为每个类别生成有效的颜色,并且具有相同类别的元素获得相同的值。
您实际上有点仓促行事,因为您已经指定了颜色应该是什么!因此,为了修复该部分,我还覆盖了配色方案以简单地 return 无论它通过什么。现在,应用了正确的颜色。
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: {
/**
* Function used to map an item and its color
*/
getColorValue(v) {
return v.color;
},
colorScale(col) {
return col;
}
},
template: `
<div class="container">
<sunburst
class="flavor-wheel"
:data="data"
:showLabels="true"
:centralCircleRelativeSize="10"
:getCategoryForColor="getColorValue"
:colorScale="colorScale"
>
<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/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.css">
<div id="app"></div>
我目前正在构建一个 D3 Sunburst Vue
组件,我正在为此使用 npm 包 vue-d3-sunburst
。可以在此处找到该软件包的文档:
https://www.npmjs.com/package/vue-d3-sunburst
文档说有一个 get-category-for-color
函数用于映射项目及其颜色,如下所示:
(nodeD3: Object) => category: Number | String By default use the node name
我在这里完全没有时间,只是不知道如何获取应用于每条路径的每个节点的颜色值,我想知道是否有人可以提供帮助?
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: {
/**
* 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/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.css">
<div id="app"></div>
我对 Vue 不是很熟悉,但我很确定问题如下:
您需要将其作为 属性 传递,而不是调用 HTML 中的函数。不同的是,如果你加上括号,函数的 result 将被传递给 VueJS,而不是函数本身。然后,您将能够按照您期望的方式访问函数的参数。
编辑
这个名字getCategoryForColor
应该已经告诉我了,但实际上发生的事情并不是你所期望的。 getCategoryForColor
函数期望接收表示单元格所属“类别”的任何字符串或值。然后将这些类别映射到 colorScale
函数,该函数确保为每个类别生成有效的颜色,并且具有相同类别的元素获得相同的值。
您实际上有点仓促行事,因为您已经指定了颜色应该是什么!因此,为了修复该部分,我还覆盖了配色方案以简单地 return 无论它通过什么。现在,应用了正确的颜色。
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: {
/**
* Function used to map an item and its color
*/
getColorValue(v) {
return v.color;
},
colorScale(col) {
return col;
}
},
template: `
<div class="container">
<sunburst
class="flavor-wheel"
:data="data"
:showLabels="true"
:centralCircleRelativeSize="10"
:getCategoryForColor="getColorValue"
:colorScale="colorScale"
>
<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/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-d3-sunburst@1.9.1/dist/vue-d3-sunburst.css">
<div id="app"></div>