Использование d3.nest для создания диаграммы ap ie - PullRequest
Новая
       34

Использование d3.nest для создания диаграммы ap ie

0 голосов
/ 19 февраля 2020

У меня есть ассортимент данных, и я использовал его для создания кольцевой диаграммы. Я хочу составить диаграмму ap ie, используя разбивку данных, которые я получил с помощью d3.nest для разделения данных, которые у меня были (в настоящее время они делятся на 3 категории: гнездо разбивает их на 129). В основном, у меня есть данные Olympi c, основанные на награжденных медалях, и я хочу разделить данные о взаимодействии, в какие виды спорта они были заработаны.

Я просто не уверен, как использовать вложенные данные для создания ap ie диаграмма, особенно если ключи переменные. Я включу мою реализацию для кольцевой диаграммы. 

  var pie = d3.pie();

  // color based on medal awarded
  // order: gold, silver, bronze
  var color = d3.scaleOrdinal()
    .range(['#e5ce0c', '#e5e4e0', '#a4610a']);

  var arcs = d3.select(svg).selectAll("g.arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + (w/2) + "," + ((h-25)/2) + ")");

  arcs.append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc)
  .attr("stroke", "white")
  .style("stroke-width", "0.5px")
  .on('mouseover', function(d) {
    d3.select(this).attr('opacity', .7);

  })
  .on('mouseleave', function(d) {
    d3.select(this).attr('opacity', 1);
  });

  // title
  d3.select(svg).append('text')
    .attr('x', function(d) {
      return ((w/2) - 85);
    })
    .attr('y', '20')
    .text(function(d) {
      return ('Medal breakdown for ' + country);
    })
    .attr('font-size', '16px');

  arcs.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.value;
    });

1 Ответ

1 голос
/ 20 февраля 2020

Не могли бы вы подтвердить, это формат данных, который у вас есть?

Пожалуйста, найдите код ниже и дайте мне знать, если у вас есть какие-либо сомнения. 

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();

var data = [
{name:"football", medal:1},
{name:"hockey", medal:2},
{name:"cricket", medal:3},
{name:"tennis", medal:4},
{name:"table tennis", medal:5},
];


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.medal;});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
    .attr("fill", function(d, i){
        return color(i);
    })
    .attr("d", function (d) {
        // log the result of the arc generator to show how cool it is :)
        return arc(d);
    });

// add the text
arcs.append("svg:text").attr("transform", function(d){
			d.innerRadius = 0;
			d.outerRadius = r;
    return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor", "middle").text( function(d, i) {
    return data[i].name;}
		);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.min.js"></script>
<div id="chart"></div>
...