D3.JS 和 Vue 如何创建基本的圆环图

Question

我有一个 Vue 项目，我尝试在其中绘制一个简单的圆环图。我尝试创建的图表显示在 D3.js 的文档中：Donut Chart。

但是当我尝试在 Vue 中创建它时，我似乎无法让它工作。我不断得到一个 [Vue warn]: Error in mounted hook: "TypeError: _ is not iterable".

还有一种方法可以让 SVG 填充父级 div，以便它响应父级的宽度和高度。

<template>
  <div class="p-3 flex flex-col">
    <div class="w-full flex-1">
      <div id="my_dataviz"></div>
    </div>
  </div>
</template>
<script>
import * as d3 from "d3";

export default {
  name: "DoughnutChartItem",
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    // set the dimensions and margins of the graph
    var width = 450;
    var height = 450;
    var margin = 40;

    // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
    var radius = Math.min(width, height) / 2 - margin;

    // append the svg object to the div called 'my_dataviz'
    var svg = d3
      .select("#my_dataviz")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    // Create dummy data
    var data = { a: 9, b: 20, c: 30, d: 8, e: 12 };

    // set the color scale
    var color = d3
      .scaleOrdinal()
      .domain(data)
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

    // Compute the position of each group on the pie:
    var pie = d3.pie().value(function(d) {
      return d.value;
    });
    var data_ready = pie(d3.entries(data));

    // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
    svg
      .selectAll("whatever")
      .data(data_ready)
      .enter()
      .append("path")
      .attr(
        "d",
        d3
          .arc()
          .innerRadius(100) // This is the size of the donut hole
          .outerRadius(radius)
      )
      .attr("fill", function(d) {
        return color(d.data.key);
      })
      .attr("stroke", "black")
      .style("stroke-width", "2px")
      .style("opacity", 0.7);
  }
};
</script>

Answer 1

你的问题在于.domain(data)：

// set the color scale
var color = d3
  .scaleOrdinal()
  .domain(data) //<-- domain function is expecting an array not an object
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

你需要的是：

// set the color scale
var color = d3
  .scaleOrdinal()
  .domain(Object.keys(data)) //<-- set domain to ['a','b','c','d','e']
  .range(['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56']);

工作示例：

// set the color scale
var color = d3
  .scaleOrdinal()
  .domain(data) //<-- domain function is expecting an array not an object
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

基于评论的新片段：

// set the color scale
var color = d3
  .scaleOrdinal()
  .domain(Object.keys(data)) //<-- set domain to ['a','b','c','d','e']
  .range(['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56']);