y軸のみでのD3バブルチャートバブルレンダリング

0
投票

以下に示すJSONデータを含むd3チャートのマイコード。バブルチャートをプロットする方法が含まれています。レンダリング後、すべてのバブルが互いに重なり合った状態でチャートがy軸上に表示されます。バブルの半径と軸からのマージンを変更しましたが、運がありませんでした。誰でもこれについて解決策を見つけることができますか。

以下に示すJSONデータを使用したd3チャートのマイコード。バブルチャートをプロットする方法が含まれています。レンダリング後、すべてのバブルが互いに重なり合った状態でチャートがy軸上に表示されます。バブルの半径と軸からのマージンを変更しましたが、運がありませんでした。誰もがこれについて解決策を持つことができますか?

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=[{ 「国」:「アフガニスタン」、 「大陸」:「アジア」、 「lifeExp」:43.828、 「ポップ」:31889923、 "gdpPercap":974.5803384 }、 {{ 「国」:「アルバニア」、 「大陸」:「ヨーロッパ」、 「lifeExp」:76.423、 「ポップ」:3600523、 "gdpPercap":5937.029526 }、 {{ 「国」:「アルジェリア」、 「大陸」:「アフリカ」、 「lifeExp」:72.301、 「ポップ」:33333216、 "gdpPercap":6223.367465 }、 {{ 「国」:「ドミニカ共和国」、 「大陸」:「アメリカ」、 「lifeExp」:72.235、 「ポップ」:9319622、 "gdpPercap":6025.374752 }、 {{ 「国」:「リベリア」、 「大陸」:「アフリカ」、 「lifeExp」:45.678、 「ポップ」:3193942、 "gdpPercap":414.5073415 }、 {{ 「国」:「リビア」、 「大陸」:「アフリカ」、 「lifeExp」:73.952、 「ポップ」:6036914、 "gdpPercap":12057.49928 }、 {{ 「国」:「マダガスカル」、 「大陸」:「アフリカ」、 「lifeExp」:59.443、 「ポップ」:19167654、 "gdpPercap":1044.770126 }、 {{ 「国」:「マラウイ」、 「大陸」:「アフリカ」、 「lifeExp」:48.303、 「ポップ」:13327079、 "gdpPercap":759.3499101 }、 {{ 「国」:「マレーシア」、 「大陸」:「アジア」、 「lifeExp」:74.241、 「ポップ」:24821286、 "gdpPercap":12451.6558 }、 {{ 「国」:「マリ」、 「大陸」:「アフリカ」、 「lifeExp」:54.467、 「ポップ」:12031795、 "gdpPercap":1042.581557 }、 {{ 「国」:「モーリタニア」、 「大陸」:「アフリカ」、 「lifeExp」:64.164、 「ポップ」:3270065、 "gdpPercap":1803.151496 }、 ]; const margin={ トップ10、 右:20、 下:200、 左:50 }、 width=1000-margin.left-margin.right、 高さ=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){ 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){ d.Costを返します。 })、 ])。range([height、0]); svg.append( 'g')。call(d3.axisLeft(y)); const z=d3.scaleLinear()。domain([ 0、 d3.max(data、function(d){ d.Costを返します。 })、 ])。range([height、0]); svg .append( 'g') .selectAll( 'dot') .data(data) 。入る() .append( 'circle') .attr( 'cx'、(d)=>{ console.log("cx"、x(d.Cost)) x(d.Cost/1000);を返します。 }) .attr( 'cy'、(d)=>{ console.log("cy >>"、d.Cost) x(d.Cost/500);を返します。 }) .attr( 'r'、function(d){ z(d.Cost);を返します。 }) .style( 'fill'、function(d){ `${myColor(d.Resource_Type)}`を返します; }) .style( '不透明度'、 '0.7') .attr( 'ストローク'、 '#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>

ソース

d3.js javascript angular typescript

-Ruben Helsloot

答えを待っています

興味があるかもしれません

© 2021   KonnichiwaSekai.Com