我目前正在構建一個 D3 SunburstVue組件，我正在vue-d3-sunburst為此使用 npm 包。可以在此處找到該軟體包的檔案：
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 >
<sunburst
: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/[email protected]/dist/vue-d3-sunburst.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-d3-sunburst.css">
<div id="app"></div>uj5u.com熱心網友回復：
我對 Vue 并不十分熟悉，但我很確定問題如下：
您需要將其作為屬性傳遞，而不是在 HTML 中呼叫該函式。不同的是，如果加上括號，函式的結果將傳遞給 VueJS，而不是函式本身。然后，您將能夠按照您期望的方式訪問函式的引數。
編輯
這個名字getCategoryForColor應該讓我知道，但實際上發生的事情并不是你所期望的。該getCategoryForColor函式期望接收代表單元格所屬“類別”的任何字串或值。然后將這些類別映射到一個colorScale函式，該函式確保為每個類別生成有效顏色，并且具有相同類別的元素獲得相同的值。
您實際上在這一點上有點過火，因為您已經指定了顏色應該是什么！因此，為了修復該部分，我還覆寫了配色方案以簡單地回傳通過的任何內容。現在，應用了正確的顏色。
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 >
<sunburst
: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/[email protected]/dist/vue-d3-sunburst.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-d3-sunburst.css">
<div id="app"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/365200.html
標籤：javascript Vue.js d3.js 旭日图