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是一个示例，演示了在域中给出10个值和范围内有2个值时同时使用.range()和.rangePoints()的结果。

为了让您的案例得以实现，您还需要@ 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]);

Answer 2

您正在混淆d3.map(object)，它创建了一个哈希映射数据结构，Array.prototype.map(function)，将一个数组转换为另一个数组。

尝试：

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

Answer 3

对于 v4 以上的任何版本，您都需要使用 d3.scalePoint()。

例如

xScale = d3.scalePoint().domain([0, 1, 2]).range([margin, width - margin])

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

3 个答案: