我正在尝试使用 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;
})
最佳答案
有序量表期望 .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]);
关于svg - D3 序数标度仅返回极端值。为什么不在范围和域之间进行插值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24976326/