D3.Js: невозможно создать Arc, чтобы создать несколько пончиков с набором данных - PullRequest
Новая
       49

D3.Js: невозможно создать Arc, чтобы создать несколько пончиков с набором данных

0 голосов
/ 30 октября 2019

Я хочу создать несколько кольцевых диаграмм, используя d3 v4. enter image description here

, но получаю сообщение об ошибке:

d3.min.js: 2Ошибка: атрибут d: ожидаемая команда пути перемещения («M» или «m»), «function t () {var…

Пожалуйста, обратитесь к коду из jsfiddle 

var dataset = {
      "fir": [1, 2, 3, 4,2, 3, 1],
       "cloud": [1513606, 40000, 30000, 50600]
    };
var innerRadius = [100, 50];
    var outerRadius = [150, 100];

var width = 960,
    height = 500,
    radius = height / 2 - 10;

var arc = d3.arc();

var pie = d3.pie();

    var allColors = ['#DF3054', '#FF8E00', '#FFBD1D', '#EBE2B2', '#7DC3E6', '#7DC3E6', '#008CC8', '#00508E', '#8E26C9', '#E5E6ED', '#777980', '#F8E71C'];
    var color = d3.scaleOrdinal(allColors);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
gs.selectAll("path")
    .data (
    function(d) {
      return pie(d);
    })
  .enter().append("path")
    .style("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(innerRadius[j]).outerRadius(outerRadius[j]); });

1 Ответ

0 голосов
/ 31 октября 2019

Было несколько ошибок в коде.

  1. Весь массив данных должен быть передан в круговую функцию, чтобы он мог вычислять углы:

    vararcs = pie (dataset.fir)

  2. Для функции дуги требуется установить радиус, а затем функцию, вызываемую в генераторе путей

    var arc = d3.arc ().innerRadius (50) .outerRadius (Math.min (ширина, высота) / 2 - 1)

...

.append ("путь"). attr ("d", arc); 

var data = [1, 1, 2, 3, 5, 8, 13, 21];


var dataset = {
      "fir": [1, 2, 3, 4, 2, 3, 1],
       "cloud": [1513606, 40000, 30000, 50600]
    };
var innerRadius = [100, 50];
var outerRadius = [150, 100];

var width = 960,
    height = 500,
    radius = height / 2 - 10;

var arc = d3.arc()
  .innerRadius(50)
  .outerRadius(Math.min(width, height) / 2 - 1)

var pie = d3.pie();

var arcs = pie(dataset.fir)

var allColors = ['#DF3054', '#FF8E00', '#FFBD1D', '#EBE2B2', '#7DC3E6', '#7DC3E6', '#008CC8', '#00508E',
      /* other colors */ '#8E26C9', '#E5E6ED', '#777980', '#F8E71C'];
var color = d3.scaleOrdinal()
	.range(allColors);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g")
  .data(arcs)
  .enter()
  .append("g")
  .append("path")
  .style("fill", function(d, i) { return color(i); })
  .attr("d", arc);
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
...