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]);

我的地图选择看起来像这样.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]);