Question

我目前正在使用以下指南在Angular 2中构建一个等值区域地图： http://cartographicperspectives.org/index.php/journal/article/view/cp78-sack-et-al/1359

到目前为止，除currDate函数外，一切正常。

在d3版本3中，上述功能曾是d3.scaleQuantile().range()。

在上面使用版本3的地图教程中，d3.scale.quantile().range()接受颜色列表：d3.scale.quantile().range()。但是，当我将相同的列表放入其中时，这似乎不适用于版本4中的新[“#D4B9DA”,“#C994C7”, “#DF65B0”, “#DD1C77”, “#980043”]函数。

控制台错误为d3.scaleQuantile().range()，在Webstorm中，错误显示Type 'string' is not assignable to type 'number'.)

如果有人能指出我如何使用范围功能设置颜色的正确方向，我将不胜感激。以下代码的相关部分。

Argument types do not match parameters

Answer 1

如果有人能指出我如何使用该范围的正确方向设置颜色的功能，我很感激。

来自API documentation：

如果指定了范围，则设置范围内的离散值。该数组不能为空，并且可以包含任何类型的值。

所以你应该能够在d3 v4中使用范围数组中的字符串作为分位数比例，如果没有，可能会有不同的问题：

＆＃13;

var scale = d3.scaleQuantile().domain([0,99]).range(["steelblue","#aaa","lightgreen"]);

var svg = d3.select('body').append('svg').attr('width',500).attr('height',300);

var rects = svg.selectAll('rect')
   .data(d3.range(100))
   .enter()
   .append('rect')
   .attr('width',18)
   .attr('height',18)
   .attr('fill', function(d,i) { return scale(i); })
   .attr('x', function(d,i) { return i%10 * 20 + 30; })
   .attr('y', function(d,i) { return Math.floor(i/10) * 20 + 30; });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

＆＃13;

对于其他尺度也应如此。例如，如果您想通过使用阈值比例来控制等值线中使用的阈值：

＆＃13;

var scale = d3.scaleThreshold().domain([10,25,90]).range(["#bae4bc","#7bccc4","#2b8cbe","#0868ac"]);

var svg = d3.select('body').append('svg').attr('width',500).attr('height',300);

var rects = svg.selectAll('rect')
   .data(d3.range(100))
   .enter()
   .append('rect')
   .attr('width',18)
   .attr('height',18)
   .attr('fill', function(d,i) { return scale(i); })
   .attr('x', function(d,i) { return i%10 * 20 + 30; })
   .attr('y', function(d,i) { return Math.floor(i/10) * 20 + 30; });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

＆＃13;

了解等值线图的d3.scaleQuantile（）

1 个答案: