svg - D3 序数标度仅返回极端值。为什么不在范围和域之间进行插值？

Question

我正在尝试使用 d3.scale.ordinal() .我有一个问题，函数只返回最小和最大比例值。

我正在尝试使用 d3.map() 来构建域。然后我在相同的值上使用 xScale 函数

我的数据如下所示:

key,to_state,value,type
Populate,District of Columbia,836,Populate
Populate,Maryland,1938,Populate
Populate,New Jersey,836,Populate
Populate,Pennsylvania,939,Populate
Populate,New York,3455,Populate

我的比例函数如下所示:

xScale = d3.scale.ordinal()
                .domain(d3.map(thedata, function(d){console.log(d.to_state); return d.to_state;}))
                .range([0, w - marginleft - marginright]);

我的 map 选择看起来像这样。 Y 和高度值都被正确计算。只是 X 给我带来了麻烦。

var thechart = chart.selectAll("div")
                .data(thedata)
                .enter()

console.log(xScale("New Jersey") + " " + xScale("Pennsylvania"));

thechart.append("rect").attr("x", function(d, i) {  
                        return xScale(d.to_state) + marginleft;
                    })

Answer 1

有序量表期望 .range 中的项目数相同.domain 中的数组大批。当给定范围的边界作为数组时，它不像线性标度那样插入中间值。由于您只给出范围内的两个项目，它们交替作为域中给定的每个值的返回值。

如果您希望域中的每个值都有不同的返回值，则需要提供范围内的相应值。否则，如果您只想提供范围的边界，并为您计算中间值，请使用 .rangePoints()而不是 .range() .

HERE是一个示例，演示了同时使用 .range() 的结果和 .rangePoints()当给定域中的 10 个值和范围中的 2 个值时。

为了在您的情况下使用它，您还需要采纳@AmeliaBR 的建议，即使用 Array.prototype.map而不是 d3.map ，并将其与 .rangePoints() 结合使用对您的范围的值进行补间。

xScale = d3.scale.ordinal()
  .domain(thedata.map(function(d){ return d.to_state;}) )
  .rangePoints([0, w - marginleft - marginright]);