D3序数标度仅返回极端.为什么不在范围和域之间插值? [英] D3 ordinal scale only returning extremes. Why isn't it interpolating between range and domain?

问题描述

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

I'm trying to use d3.scale.ordinal(). I am having an issue where the function only returns the minimum and maximum scale values.

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

I am trying to use d3.map() to construct the domain. Then I use an xScale function on the same value

我的数据如下:

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给我带来麻烦.

My map selection looks like this. The Y and height values are all being calculated properly. Just the X is giving me trouble.

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数组中的项目数量相同.当给定范围的边界作为数组时，它不像线性标度插值中间的值.由于您只给出该范围内的两个项目，因此它们将交替用作域中给定每个值的返回值.

An ordinal scale expects the same number of items in the .range array as there are in the .domain array. It is not like a linear scale which interpolates the in-between values when given the boundaries of the range as an array. Since you give only two items in the range, they are alternated as the return values for each value given in the domain.

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

If you want to have a different return value for each value in your domain, you need to provide the corresponding value in the range. Otherwise, if you just want to provide the boundaries of your range, and have the in-between values calculated for you, use .rangePoints() instead of .range().

此处 是一个示例，演示了在给定域中10个值和范围中2个值的情况下同时使用.range()和.rangePoints()的结果.

要使其适用于您的情况，您还需要采纳@AmeliaBR的建议，使用Array.prototype.map而不是d3.map，并将其与.rangePoints()结合起来以调整范围的值.

To get this to work in your case, you will also want to take @AmeliaBR's suggestion of using Array.prototype.map rather than d3.map, and combine this with .rangePoints() to tween the values of your range.

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

这篇关于D3序数标度仅返回极端.为什么不在范围和域之间插值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！