如何使用 d3.scaleLinear 在 d3 中找到地图的半径

问题描述

我有一个如下图所示的图表

图表上饼图的半径正在尝试如下所示

 <PieChartMarkers
              totalSites={totalSites}
              key={i}
              keymarket={name}
              pieData={pieData}
              x={projection(coordinates)[0]}
              y={projection(coordinates)[1]}
              **radius={this.getMarkeTradius(totalCase)}**
              mouSEOverHandler={this.showTooltip}
              mouSEOutHandler={this.hidetooltip}
            />

  getMarkeTradius = (totalCase) => {
    let radius = null;
    // let data=d3.scaleLinear([10,130]).range([0,960]);
    let callback= d3.scaleLinear()
    .range([0,totalCase])
    .domain([10,130])
    radius = totalCase / 650 + 10;
    console.log(radius)
    return radius;
  };

目前我得到的半径为radius = totalCase / 650 + 10;这工作正常，但建议使用 d3.scaleLinear 来获取图表上的半径，当我尝试使用以下代码片段时，我得到的值为 1313316

//totalCase 是来自 API 的变量值

let callback= d3.scaleLinear()
    .range([0,130]

请帮助我理解如何使用d3.scaleLinear在地图上绘制饼图来获取半径

解决方法

首先，您不应该使用线性比例来获得这些半径：我们将数据编码为圆的面积，而不是它们的半径。也就是说，您应该使用 d3.scaleSqrt。另外，为 0 域设置 0 范围，因为如果没有案例，应该没有圆圈。

所以，你的函数应该是这样的：

getMarketRadius = totalCase => {
    return d3.scaleLinear().range([0,totalCase]).domain([0,130])(totalCase);
};

更好的选择是在函数外设置比例，并直接使用它来设置 radius。

myScale = d3.scaleLinear()
    .range([0,totalCase])
    .domain([0,130]);

radius={this.myScale(totalCase)}