Grafico a bolle D3 rendering a bolle solo sull'asse y

0
Vote

Il mio codice per il grafico d3 con dati JSON mostrato di seguito. include il metodo per tracciare il grafico a bolle. dopo il rendering, il grafico si trova sull'asse y con tutte le bolle che si sovrappongono. Ho cambiato il raggio della bolla e anche i margini dall'asse ma senza fortuna. Qualcuno può avere una soluzione su questo.

Il mio codice per il grafico d3 con i dati JSON mostrato di seguito. include il metodo per tracciare il grafico a bolle. dopo il rendering, il grafico si trova sull'asse y con tutte le bolle che si sovrappongono. Ho cambiato il raggio della bolla e anche i margini dall'asse ma senza fortuna. Qualcuno può avere una soluzione su questo.

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=[{ "country":"Afghanistan", "continent":"Asia", "lifeExp": 43,828, "pop": 31889923, "gdpPercap": 974.5803384 }, { "country":"Albania", "continente":"Europa", "lifeExp": 76,423, "pop": 3600523, "gdpPercap": 5937.029526 }, { "country":"Algeria", "continent":"Africa", "lifeExp": 72,301, "pop": 33333216, "gdpPercap": 6223.367465 }, { "country":"Repubblica Dominicana", "continent":"Americhe", "lifeExp": 72,235, "pop": 9319622, "gdpPercap": 6025.374752 }, { "country":"Liberia", "continent":"Africa", "lifeExp": 45.678, "pop": 3193942, "gdpPercap": 414.5073415 }, { "country":"Libia", "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={ in alto: 10, destra: 20, in basso: 200, sinistra: 50 }, larghezza=1000 -margin.left -margin.right, altezza=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 (dati, funzione (d) { ritorno d.Cost; }), ]). intervallo ([0, 1]); svg .append ('g') .attr ('transform', 'translate (0,' + height + ')') .call (d3.axisBottom (x)); const y=d3.scaleLinear (). domain ([ 0, d3.max (dati, funzione (d) { ritorno d.Cost; }), ]). range ([height, 0]); svg.append ('g'). call (d3.axisLeft (y)); const z=d3.scaleLinear (). domain ([ 0, d3.max (dati, funzione (d) { ritorno d.Cost; }), ]). range ([height, 0]); svg .append ('g') .selectAll ("punto") .data (dati) .accedere() .append ('cerchio') .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', funzione (d) { return z (d.Cost); }) .style ('fill', function (d) { return `${myColor (d.Resource_Type)}`; }) .style ("opacità","0,7") .attr ('stroke', '#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>

Source

d3.js javascript angular typescript

-Ruben Helsloot

Waiting for the answer

Potreste essere interessati

© 2021   Risposta.org