Javascript D3.JS和Vue如何创建基本甜甜圈图表

我有一个Vue项目，我试图画一个简单的油炸圈饼图。我尝试创建的图表显示在D3.js的文档中：

但当我试图在Vue中创建它时，我似乎无法让它工作。我不断地得到一份工作

[Vue warn]：挂载挂钩中的错误：“TypeError:u.不可编辑”

还有一种方法可以使SVG填充父div，从而响应父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>

从“d3”导入*作为d3；
导出默认值{
名称：“DoughnutChartItem”，
道具：{
数据：{
类型：数组，
必填项：true
}
},
安装的（）{
//设置图形的尺寸和边距
var宽度=450；
var高度=450；
var保证金=40；
//pieplot的半径是宽度的一半或高度的一半（最小的一个）。我减去一点边距。
变量半径=数学最小值（宽度、高度）/2-裕度；
//将svg对象附加到名为“my_dataviz”的div中
var svg=d3
.选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//创建虚拟数据
变量数据={a:9，b:20，c:30，d:8，e:12}；
//设置颜色比例
var color=d3
.scaleOrdinal（）
.域名（数据）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”）；
//计算每个组在饼图上的位置：
var pie=d3.pie（）.value（函数（d）{
返回d值；
});
var data_ready=pie（d3.条目（数据））；
//构建饼图：基本上，饼图的每个部分都是我们使用arc函数构建的路径。
svg
.selectAll（“任意”）
.数据（数据准备就绪）
.输入（）
.append（“路径”）
艾特先生(
“d”，
d3
.arc（）
.innerRadius（100）//这是甜甜圈孔的大小
.外部（半径）
)
.attr（“填充”，功能（d）{
返回颜色（d.data.key）；
})
.attr（“笔划”、“黑色”）
.style（“笔划宽度”、“2px”）
.样式（“不透明度”，0.7）；
}
};

您的问题在

行中。域（数据）

：

//设置颜色比例
var color=d3
.scaleOrdinal（）
.domain（数据）/您的问题在
行中。domain（数据）
：

//设置颜色比例
var color=d3
.scaleOrdinal（）
.domain（data）//感谢您的回复。但是，如果我将
.domain（data）
更改为
.domain（Object.keys（data））
我仍然会在挂载的钩子中得到一个错误
错误：“TypeError:d3\uu网页包\u导入的\u模块\u1\uuuu。条目不是函数”
您正在使用一个旧的
d3
代码示例和一个较新的
d3
库<代码>d3。条目
在版本6中不推荐使用。注意，我的示例是加载版本5。我添加了一个运行v6的新代码段。感谢您的回复。但是，如果我将
.domain（data）
更改为
.domain（Object.keys（data））
我仍然会在挂载的钩子中得到一个错误
错误：“TypeError:d3\uu网页包\u导入的\u模块\u1\uuuu。条目不是函数”
您正在使用一个旧的
d3
代码示例和一个较新的
d3
库<代码>d3。条目

在版本6中不推荐使用。注意，我的示例是加载版本5。我添加了一个运行v6的新代码段。

// 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']);