Renderização de bolhas do gráfico de bolhas D3 apenas no eixo y

0
Voto

Gráfico Meu código para d3 com dados JSON mostrados abaixo. inclui método para traçar o gráfico de bolhas. após a renderização, o gráfico vem ao longo do eixo y com todas as bolhas sobrepostas umas às outras. Mudei o raio da bolha e também as margens do eixo, mas sem sorte. Alguém pode ter uma solução para isso.

Meu código para gráfico d3 com dados JSON mostrados abaixo. inclui método para traçar o gráfico de bolhas. após a renderização, o gráfico vem sobre o eixo y com todas as bolhas sobrepostas umas às outras. Mudei o raio da bolha e também as margens do eixo, mas sem sorte. Alguém pode ter uma solução para isso.

const data=[{
   "country":"Afghanistan",
   "continent":"Asia",
   "lifeExp": 43.828,
   "pop": 31889923,
   "gdpPercap": 974.5803384
  },
  {
   "country":"Albania",
   "continent":"Europe",
   "lifeExp": 76.423,
   "pop": 3600523,
   "gdpPercap": 5937.029526
  },
  {
   "country":"Algeria",
   "continent":"Africa",
   "lifeExp": 72.301,
   "pop": 33333216,
   "gdpPercap": 6223.367465
  },
  {
   "country":"Dominican Republic",
   "continent":"Americas",
   "lifeExp": 72.235,
   "pop": 9319622,
   "gdpPercap": 6025.374752
  },

  {
   "country":"Liberia",
   "continent":"Africa",
   "lifeExp": 45.678,
   "pop": 3193942,
   "gdpPercap": 414.5073415
  },
  {
   "country":"Libya",
   "continent":"Africa",
   "lifeExp": 73.952,
   "pop": 6036914,
   "gdpPercap": 12057.49928
  },
  {
   "country":"Madagascar",
   "continent":"Africa",
   "lifeExp": 59.443,
   "pop": 19167654,
   "gdpPercap": 1044.770126
  },
  {
   "country":"Malawi",
   "continent":"Africa",
   "lifeExp": 48.303,
   "pop": 13327079,
   "gdpPercap": 759.3499101
  },
  {
   "country":"Malaysia",
   "continent":"Asia",
   "lifeExp": 74.241,
   "pop": 24821286,
   "gdpPercap": 12451.6558
  },
  {
   "country":"Mali",
   "continent":"Africa",
   "lifeExp": 54.467,
   "pop": 12031795,
   "gdpPercap": 1042.581557
  },
  {
   "country":"Mauritania",
   "continent":"Africa",
   "lifeExp": 64.164,
   "pop": 3270065,
   "gdpPercap": 1803.151496
  },

];

const margin={
    top: 10,
    right: 20,
    bottom: 200,
    left: 50
  },
  width=1000 -margin.left -margin.right,
  height=420 -margin.top -margin.bottom;

const div=d3.select('.bubble-chart-main-tooltip');
const svg=d3.select('svg');

var myColor=d3
  .scaleOrdinal()
  .domain(data.map((d)=> d.Resource_Type))

const x=d3.scaleLinear().domain([
  0,
  d3.max(data, function(d) {
    return d.Cost;
  }),
]).range([0, 1]);
svg
  .append('g')
  .attr('transform', 'translate(0,' + height + ')')
  .call(d3.axisBottom(x));


const y=d3.scaleLinear().domain([
  0,
  d3.max(data, function(d) {
    return d.Cost;
  }),
]).range([height, 0]);
svg.append('g').call(d3.axisLeft(y));


const z=d3.scaleLinear().domain([
  0,
  d3.max(data, function(d) {
    return d.Cost;
  }),
]).range([height, 0]);


svg
  .append('g')
  .selectAll('dot')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', (d)=> {
    console.log("cx", x(d.Cost))
    return x(d.Cost/1000);
  })
  .attr('cy', (d)=> {
    console.log("cy>>", d.Cost)
    return x(d.Cost/500);
  })
  .attr('r', function(d) {
    return z(d.Cost);
  })
  .style('fill', function(d) {
    return `${myColor(d.Resource_Type)}`;
  })
  .style('opacity', '0.7')
  .attr('stroke', '#fff');
const data=[{ "country":"Afghanistan", "continent":"Asia", "lifeExp": 43.828, "pop": 31889923, "gdpPercap": 974.5803384 }, { "country":"Albania", "continent":"Europe", "lifeExp": 76.423, "pop": 3600523, "gdpPercap": 5937.029526 }, { "country":"Algeria", "continent":"Africa", "lifeExp": 72.301, "pop": 33333216, "gdpPercap": 6223.367465 }, { "country":"Dominican Republic", "continent":"Americas", "lifeExp": 72.235, "pop": 9319622, "gdpPercap": 6025.374752 }, { "country":"Liberia", "continent":"Africa", "lifeExp": 45.678, "pop": 3193942, "gdpPercap": 414.5073415 }, { "country":"Libya", "continent":"Africa", "lifeExp": 73.952, "pop": 6036914, "gdpPercap": 12057.49928 }, { "country":"Madagascar", "continent":"Africa", "lifeExp": 59.443, "pop": 19167654, "gdpPercap": 1044.770126 }, { "country":"Malawi", "continent":"Africa", "lifeExp": 48.303, "pop": 13327079, "gdpPercap": 759.3499101 }, { "country":"Malaysia", "continent":"Asia", "lifeExp": 74.241, "pop": 24821286, "gdpPercap": 12451.6558 }, { "country":"Mali", "continent":"Africa", "lifeExp": 54.467, "pop": 12031795, "gdpPercap": 1042.581557 }, { "country":"Mauritania", "continent":"Africa", "lifeExp": 64.164, "pop": 3270065, "gdpPercap": 1803.151496 }, ]; const margin={ top: 10, right: 20, bottom: 200, left: 50 }, width=1000 -margin.left -margin.right, height=420 -margin.top -margin.bottom; const div=d3.select('.bubble-chart-main-tooltip'); const svg=d3.select('svg'); var myColor=d3 .scaleOrdinal() .domain(data.map((d)=> d.Resource_Type)) const x=d3.scaleLinear().domain([ 0, d3.max(data, function(d) { return d.Cost; }), ]).range([0, 1]); svg .append('g') .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x)); const y=d3.scaleLinear().domain([ 0, d3.max(data, function(d) { return d.Cost; }), ]).range([height, 0]); svg.append('g').call(d3.axisLeft(y)); const z=d3.scaleLinear().domain([ 0, d3.max(data, function(d) { return d.Cost; }), ]).range([height, 0]); svg .append('g') .selectAll('dot') .data(data) .enter() .append('circle') .attr('cx', (d)=> { console.log("cx", x(d.Cost)) return x(d.Cost/1000); }) .attr('cy', (d)=> { console.log("cy>>", d.Cost) return x(d.Cost/500); }) .attr('r', function(d) { return z(d.Cost); }) .style('fill', function(d) { return `${myColor(d.Resource_Type)}`; }) .style('opacity', '0.7') .attr('stroke', '#fff'); const data=[{ "país":"Afeganistão", "continente":"Ásia", "lifeExp": 43.828, "pop": 31889923, "gdpPercap": 974.5803384 }, { "país":"Albânia", "continente":"Europa", "lifeExp": 76.423, "pop": 3600523, "gdpPercap": 5937.029526 }, { "país":"Argélia", "continente":"África", "lifeExp": 72.301, "pop": 33333216, "gdpPercap": 6223.367465 }, { "país":"República Dominicana", "continente":"Américas", "lifeExp": 72,235, "pop": 9319622, "gdpPercap": 6025.374752 }, { "país":"Libéria", "continente":"África", "lifeExp": 45.678, "pop": 3193942, "gdpPercap": 414.5073415 }, { "país":"Líbia", "continente":"África", "lifeExp": 73.952, "pop": 6036914, "gdpPercap": 12057.49928 }, { "país":"Madagascar", "continente":"África", "lifeExp": 59.443, "pop": 19167654, "gdpPercap": 1044.770126 }, { "país":"Malawi", "continente":"África", "lifeExp": 48.303, "pop": 13327079, "gdpPercap": 759.3499101 }, { "país":"Malásia", "continente":"Ásia", "lifeExp": 74,241, "pop": 24821286, "gdpPercap": 12451.6558 }, { "país":"Mali", "continente":"África", "lifeExp": 54.467, "pop": 12031795, "gdpPercap": 1042.581557 }, { "país":"Mauritânia", "continente":"África", "lifeExp": 64.164, "pop": 3270065, "gdpPercap": 1803.151496 }, ]; margem const={ topo: 10, certo: 20, inferior: 200, esquerda: 50 }, largura=1000 -margin.left -margin.right, altura=420 -margin.top -margin.bottom; const div=d3.select ('. bubble-chart-main-tooltip'); const svg=d3.select ('svg'); var myColor=d3 .scaleOrdinal () .domain (data.map ((d)=>d.Resource_Type)) const x=d3.scaleLinear (). domínio ([ 0, d3.max (dados, função (d) { return d.Cost; }), ]). intervalo ([0, 1]); SVG .append ('g') .attr ('transformar', 'traduzir (0,' + altura + ')') .call (d3.axisBottom (x)); const y=d3.scaleLinear (). domínio ([ 0, d3.max (dados, função (d) { return d.Custo; }), ]). intervalo ([altura, 0]); svg.append ('g'). call (d3.axisLeft (y)); const z=d3.scaleLinear (). domínio ([ 0, d3.max (dados, função (d) { return d.Custo; }), ]). intervalo ([altura, 0]); SVG .append ('g') .selectAll ('ponto') .data (dados) .entrar() .append ('círculo') .attr ('cx', (d)=>{ console.log ("cx", x (d.Custo)) retornar x (d.Custo/1000); }) .attr ('cy', (d)=>{ console.log ("cy >>", d.Custo) retornar x (d.Custo/500); }) .attr ('r', função (d) { retornar z (d.Custo); }) .style ('preencher', função (d) { return `${myColor (d.Resource_Type)}`; }) .style ('opacidade', '0,7') .attr ('traço', '#fff');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <svg></svg>

Fonte

d3.js javascript angular typescript

-Ruben Helsloot

Esperando a resposta

Você pode interessar

© 2021   OlaMundo.Org