javascript - D3 线性刻度 NaN

Question

下面的代码是我当前的代码。我想将 GeoJSON 中的数据映射到 2 到 50 之间的数字。它返回的唯一内容是 NaN ...

shapes.transition()
  .duration(500)
  .attr("width", 12)
  .attr("height", function(d) {
    if (optionArray[i] === "location") {
      return 12;
    }

    if (optionArray[i] === "Average_Age") {
      var x = d3.scaleLinear()
        .range([2, 50])
        .domain(d.properties.Average_Age);

      return x(d.properties.Average_Age);
    }
  });

标签： javascriptd3.js

Answer 1

在代码的共享部分中，x为输入数据集中的每条记录重新定义了比例。这不是必需的，并且会增加开销。

比例尺只应在函数调用x之外声明一次。.attr("height, [...]"

然后，scaleLinear.domain函数的参数应该是一个数组，其中包含在输入数据集中找到的最小值和最大值（参见库文档中的示例d3.extent。实用函数可用于返回这样的数组（阅读：在 d3. js）。

假设您的数据集被调用data，代码应该是：

var x = d3.scaleLinear()
  .range([2, 50])
  .domain(d3.extent(data, function(d) { return d.properties.Average_Age; }));

shapes.transition()
  .duration(500)
  .attr("width", 12)
  .attr("height", function(d) {
    if (optionArray[i] === "location") {
      return 12;
    }

    if (optionArray[i] === "Average_Age") {

      return x(d.properties.Average_Age);
    }
  });