个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 19:01:43 24 4
gpt4 key购买 nike

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

但是当我尝试在 Vue 中创建它时，我似乎无法让它工作。我不断得到[Vue warn]:安装的钩子(Hook)出错:“TypeError:_不可迭代”。

还有一种方法可以让 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>

最佳答案

您的问题在行 .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']);

工作示例:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <div class="p-3 flex flex-col" id="one">
      <div class="w-full flex-1">
        <div id="my_dataviz"></div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#one',
        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(Object.keys(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>
  </body>
</html>

基于评论的新代码段:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <div class="p-3 flex flex-col" id="one">
      <div class="w-full flex-1">
        <div id="my_dataviz"></div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#one',
        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(Object.keys(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[1];
          });
                   
          var data_ready = pie(Object.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[0]);
            })
            .attr('stroke', 'black')
            .style('stroke-width', '2px')
            .style('opacity', 0.7);
        }
      });
    </script>
  </body>
</html>

关于javascript - D3.JS 和 Vue 如何创建基本的圆环图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65479901/

24 4 0
文章推荐： google-cloud-platform - Compute Engine 虚拟机创建通知
文章推荐： Javascript根据层次结构获取节点内部文本
文章推荐： php - 如何禁用 php 或 javascript 中的文本框回发
文章推荐： mysql - 为什么 MySQL 没有正确命名我的外键？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com