如何使用 d3.scaleLinear 在 d3 中查找地图的半径答案

【问题标题】：How to use d3.scaleLinear to find the radius of a map in d3如何使用 d3.scaleLinear 在 d3 中查找地图的半径
【发布时间】：2021-03-16 03:55:19
【问题描述】：

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

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

 <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 在尝试使用时获取图表上的半径，我使用以下代码 sn-p 获取值为 1313316

//totalCase是来自API的变量值

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

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

【问题讨论】：

标签： d3.js linear-regression scale pie-chart radius

【解决方案1】：

首先，您不应该使用线性刻度来获得这些半径：我们将数据编码为圆的面积，而不是它们的半径。也就是说，您应该使用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)}

【讨论】：