D3.JS 和 Vue 如何創建一個基本的圓環圖

Question

我有一個 Vue 項目，我嘗試在其中繪制一個簡單的圓環圖。 我嘗試創建的圖表顯示在 D3.js: Donut Chart的文檔中。

但是當我嘗試在 Vue 中創建它時，我似乎無法讓它工作。 我不斷收到[Vue warn]: Error in mounted hook: "TypeError: _ is not iterable" 。

還有一種方法可以使 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>

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

工作示例：

 <: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>

D3.JS 和 Vue 如何創建一個基本的圓環圖

問題描述

1 個解決方案

解決方案1
3 已采納 2020-12-28 16:26:31

D3.JS 和 Vue 如何創建一個基本的圓環圖

問題描述

1 個解決方案

解決方案1 3 已采納 2020-12-28 16:26:31

解決方案1
3 已采納 2020-12-28 16:26:31