Bagan gelembung D3 merender gelembung pada sumbu y saja

0
Pilih

Kode saya untuk bagan d3 dengan data JSON yang ditunjukkan di bawah ini. itu termasuk metode untuk memplot diagram gelembung. setelah rendering, diagram muncul di sumbu y dengan semua gelembung saling tumpang tindih. Saya mengubah radius gelembung dan juga margin dari sumbu tetapi tidak berhasil. Adakah yang punya solusi untuk ini.

Kode saya untuk grafik d3 dengan data JSON yang ditunjukkan di bawah ini. itu termasuk metode untuk memplot diagram gelembung. setelah rendering, diagram muncul di sumbu y dengan semua gelembung saling tumpang tindih. Saya mengubah radius gelembung dan juga margin dari sumbu tetapi tidak berhasil. Adakah yang bisa punya solusi untuk ini.

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'); data konstanta=[{ "negara":"Afghanistan", "benua":"Asia", "lifeExp": 43.828, "pop": 31889923, "gdpPercap": 974.5803384 }, { "negara":"Albania", "benua":"Eropa", "lifeExp": 76.423, "pop": 3600523, "gdpPercap": 5937.029526 }, { "country":"Algeria", "benua":"Afrika", "lifeExp": 72.301, "pop": 33333216, "gdpPercap": 6223.367465 }, { "negara":"Republik Dominika", "benua":"Amerika", "lifeExp": 72.235, "pop": 9319622, "gdpPercap": 6025.374752 }, { "negara":"Liberia", "benua":"Afrika", "lifeExp": 45.678, "pop": 3193942, "gdpPercap": 414.5073415 }, { "negara":"Libya", "benua":"Afrika", "lifeExp": 73.952, "pop": 6036914, "gdpPercap": 12057.49928 }, { "country":"Madagascar", "benua":"Afrika", "lifeExp": 59.443, "pop": 19167654, "gdpPercap": 1044.770126 }, { "negara":"Malawi", "benua":"Afrika", "lifeExp": 48.303, "pop": 13327079, "gdpPercap": 759.3499101 }, { "negara":"Malaysia", "benua":"Asia", "lifeExp": 74.241, "pop": 24821286, "gdpPercap": 12451.6558 }, { "negara":"Mali", "benua":"Afrika", "lifeExp": 54.467, "pop": 12031795, "gdpPercap": 1042.581557 }, { "negara":"Mauritania", "benua":"Afrika", "lifeExp": 64.164, "pop": 3270065, "gdpPercap": 1803.151496 }, ]; margin konstanta={ 10 besar, kanan: 20, bawah: 200, kiri: 50 }, lebar=1000 -margin.left -margin.right, tinggi=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, fungsi (d) { kembali d. Biaya; }), ]). range ([0, 1]); svg .append ('g') .attr ('transform', 'translate (0,' + height + ')') .call (d3.axisBottom (x)); const y=d3.scaleLinear (). domain ([ 0, d3.max (data, fungsi (d) { kembali d. Biaya; }), ]). range ([tinggi, 0]); svg.append ('g'). call (d3.axisLeft (y)); const z=d3.scaleLinear (). domain ([ 0, d3.max (data, fungsi (d) { kembali d. Biaya; }), ]). range ([tinggi, 0]); svg .append ('g') .selectAll ('dot') .data (data) .memasukkan() .append ('lingkaran') .attr ('cx', (d)=>{ console.log ("cx", x (d.Cost)) kembali x (d.Cost/1000); }) .attr ('cy', (d)=>{ console.log ("cy >>", d.Cost) kembali x (d.Cost/500); }) .attr ('r', function (d) { kembali z (d.Cost); }) .style ('isi', fungsi (d) { return `${myColor (d.Resource_Type)}`; }) .style ('opacity', '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>

Sumber

d3.js javascript angular typescript

-Ruben Helsloot

Menunggu jawabannya

Anda Mungkin Menarik

© 2021   Pemrograman.Net