D3餅圖未回傳正確資料-有解無憂

我一直在制作一個餅圖（甜甜圈），該圖匯總了 2021 年 15 個最大的 GDP。除了一種方式外，它基本上都可以正常作業。將滑鼠懸停在上方時，我似乎無法顯示正確的國家/地區。圖表的每一部分都回傳墨西哥。我知道可能有一種比我采用的“if/else if”方法更不業余和更有效的方法。任何幫助將不勝感激。

您可以在此處查看以供參考。它不是英文的，但代碼是可以理解的。

注意：最后的“else”陳述句回傳墨西哥，這就是他們都回傳墨西哥的原因。

有問題的代碼是：

var country = [];
  
  var countryCorrespond = d3.selectAll(piePiece).datum.value;
    
    if (countryCorrespond === 22675271) {
      country.push('米國')
    } else if (countryCorrespond === 16642318) {
      country.push('中國')
    } else if (countryCorrespond === 5378136) {
      country.push('日本')
    } else if (countryCorrespond === 4319286) {
      country.push('ドイツ')
    } else if (countryCorrespond === 3124650) {
      country.push('イギリス')
    } else if (countryCorrespond === 3049704) {
      country.push('インド')
    } else if (countryCorrespond === 2938271) {
      country.push('フランス')
    } else if (countryCorrespond === 2106287) {
      country.push('イタリア')
    } else if (countryCorrespond === 1883487) {
      country.push('カナダ')
    } else if (countryCorrespond === 1806707) {
      country.push('韓國')
    } else if (countryCorrespond === 1710734) {
      country.push('ロシア')
    } else if (countryCorrespond === 1491772) {
      country.push('ブラジル')
    } else if (countryCorrespond === 1461552) {
      country.push('スペイン')
    } else {
      country.push('メキシコ')
    }

整個代碼是：

const DATASET = [
  {'COUNTRY': '米國', 'GDP': 22675271},
  {'COUNTRY': '中國', 'GDP': 16642318},
  {'COUNTRY': '日本', 'GDP': 5378136},
  {'COUNTRY': 'ドイツ', 'GDP': 4319286},
  {'COUNTRY': 'イギリス', 'GDP': 3124650},
  {'COUNTRY': 'インド', 'GDP': 3049704},
  {'COUNTRY': 'フランス', 'GDP': 2938271},
  {'COUNTRY': 'イタリア', 'GDP': 2106287},
  {'COUNTRY': 'カナダ', 'GDP': 1883487},
  {'COUNTRY': '韓國', 'GDP': 1806707},
  {'COUNTRY': 'ロシア', 'GDP': 1710734},
  {'COUNTRY': 'オーストラリア', 'GDP': 1617543},
  {'COUNTRY': 'ブラジル', 'GDP': 1491772},
  {'COUNTRY': 'スペイン', 'GDP': 1461552},
  {'COUNTRY': 'メキシコ', 'GDP': 1192480}
];

var root = d3
    .hierarchy(DATASET)
    .eachBefore(function(val) {
         val.data.value = (val.parent ? val.parent.data.value   '.' : '')
    });

var colorScheme = d3
.scaleOrdinal()
.domain([DATASET.COUNTRY])
.range(['#33a02c', '#1f78b4', '#fdbf6f', '#A03363', '#ffff99', '#e31a1c', '#b2df8a', '#ff7f00', '#cab2d6', '#EDBC34', '#fb9a99', '#b15928', '#8DF7C9', '#a6cee3', '#6a3d9a']);

var height = 1000,
    width = 1000,
    margin = 50;

var radius = Math.min(width, height) / 2 - margin;

var svg = d3
  .select('.donut-chart')
  .append('svg')
  .attr('height', height)
  .attr('width', width)
  .append('g')
  .attr('transform', `translate(${width/2},${height/2})`);

var tooltip = d3
  .select('body')
  .append('div')
  .attr('class', 'tooltip');

var pie = d3.pie(root)
  .value(d => d[1]);

var GDPval = pie(Object.entries(DATASET.map(d => d.GDP)));

  svg
    .selectAll('path')
    .data(GDPval)
    .join('path')
    .attr('d', d3.arc()
         .innerRadius(160)
         .outerRadius(radius))
    .attr('fill', d => colorScheme(d))
    .attr('stroke', '#122B16')
    .attr('stroke-width', 2.5   'px')
    .style('opacity', 0.65);

var piePiece = 
    svg
      .selectAll('path')
      .selectAll('piece')
      .data(pie)
      .enter()
      .append('g')
      .attr('class', 'piece')

// console.log(piePiece);

var centralText = svg
  .append('text')
  .attr('dy', 0.35   'em')
  .attr('class', 'central-text')
  .attr('y', -10)
  .style('text-anchor', 'middle')
  .style('font-size', 50   'px')
  .text('GDP')

d3.selectAll('path')
  .on('mouseover', function(event, d) {
    d3.select(this)
      .style('opacity', 1)

  var country = [];
  
  var countryCorrespond = d3.selectAll(piePiece).datum.value;
    
    if (countryCorrespond === 22675271) {
      country.push('米國')
    } else if (countryCorrespond === 16642318) {
      country.push('中國')
    } else if (countryCorrespond === 5378136) {
      country.push('日本')
    } else if (countryCorrespond === 4319286) {
      country.push('ドイツ')
    } else if (countryCorrespond === 3124650) {
      country.push('イギリス')
    } else if (countryCorrespond === 3049704) {
      country.push('インド')
    } else if (countryCorrespond === 2938271) {
      country.push('フランス')
    } else if (countryCorrespond === 2106287) {
      country.push('イタリア')
    } else if (countryCorrespond === 1883487) {
      country.push('カナダ')
    } else if (countryCorrespond === 1806707) {
      country.push('韓國')
    } else if (countryCorrespond === 1710734) {
      country.push('ロシア')
    } else if (countryCorrespond === 1491772) {
      country.push('ブラジル')
    } else if (countryCorrespond === 1461552) {
      country.push('スペイン')
    } else {
      country.push('メキシコ')
    }
  
  centralText
      .text(country)
      .attr("y", -10);
    
    console.log(country)
  // }
   
  tooltip
    .text('$'   
          d3.select(this).datum().value)
    .html(tooltip.text().replace(/\B(?=(\d{3}) (?!\d))/g, ","));
          
  tooltip
    .style('visibility', 'visible')
    .style('left', event.pageX   28   'px')
    .style('top', event.pageY - 28   'px')
  })
.on("mousemove", function(d) {
      tooltip
    .style("left", event.pageX   28   "px")
    .style("top", event.pageY - 28   "px");
    })
 .on('mouseout', function() {
    tooltip
      .style('visibility', 'hidden')
      d3.select(this)
      .style('opacity', 0.65);
  
    centralText.text('GDP');
});

  d3
    .select('.source-info')
    .append('text')
.text("https://eleminist.com/article/1679 による")

謝謝你的幫助！

uj5u.com熱心網友回復：

不要只使用 GDP 值生成餅圖值，而是使用整個 DATASET 物件。這樣，由生成的資料d3.pie()將包含您的原始資料.data，并且每個專案都系結到相應的專案，path因此您可以訪問它mouseover，從而可以輕松地使用該資料在工具提示和中心文本中顯示它。

感興趣的代碼如下。使用此處的所有代碼使用 codepen 。

var pies = d3.pie().value(d => d.GDP)(DATASET)

svg
  .selectAll('path')
  .data(pies)
  .join('path')
  .attr(
    'd',
    d3.arc().innerRadius(160).outerRadius(radius),
  )
 .on('mouseover', (event, d) => {
    tooltip
      .text('$'   d.data.GDP)
      .html(tooltip.text().replace(/\B(?=(\d{3}) (?!\d))/g, ','))

    tooltip
      .style('visibility', 'visible')
      .style('left', event.pageX   28   'px')
      .style('top', event.pageY - 28   'px')

    centralText.text(d.data.COUNTRY)
  })

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443683.html

標籤：javascript svg d3.js 饼形图甜甜圈图

上一篇：在React中包含可重用SVG的最佳方式

下一篇：如何為無縫影片計算準確的stroke-dasharray值