D3 Sunburst - 如何将自定义颜色映射到路径

Question

我目前正在构建一个 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>

Answer 1

我对 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 - 如何将自定义颜色映射到路径

D3 Sunburst - How to map custom color to path

javascript

d3.js

sunburst-diagram

vue.js