svg - D3 ordinal scale only returning extremes. Why isn't it interpolating between range and domain? -

I'm trying to use d3.scale.ordinal () . I have a problem where the function returns only the minimum and maximum scale value.

I am trying to use d3.map () to create a domain. Then I use an xScale function at the same price

My data looks like this:

  Key, ToState, Value, Populate, District of Columbia, 836, Populated Populate, Maryland, 1938, Populated Populate, New Jersey, 836, Populated Populate, Pennsylvania, 939, Populated Populate, New York, 3455, Populate  

My Scale Function Looks like:

  xScale = d3.scale.ordinal () .domain (d3.map (thedata, function (d) {console.l Og (d.to_state); return d.to_state;}).) Range ([0, W - margin left - margin right]);  

My map selection looks like Y and the height values ​​are being calculated properly just X is bothering me.

  var thechart = chart.selectAll ("div"). Data (thedata) .enter () console.log (xScale ("New Jersey") + "" + XScale ("Pennsylvania" )); ("Rectangle", function (D, i) {returns x escal (dto_state) + margin left;})  

An Ordinal Scale is expected to have the same number of objects in the .range code in the code. The .domain array is not like a linear scale, which, in the form of an array, repeats the in-between values, looking at the boundaries of the boundaries. Since you give only two items in the category, they are optional as the return value for each given value in the domain.

If you want a different return value for each value in your domain, then to provide related value in the range otherwise, if you want to limit limits, and calculate for you If the value is between the values, then use .range () instead of .rangePoints () . .

is an example that has both values ​​of both the .range () and .rangePoints () two domains and the result of using 2 Demonstrates the value in the range.

To make it work in your case, you would like to suggest @Amiliab to use the d3 instead of Array.prototype.map . .map , and combine it with the values ​​of your code with .rangePoints () .

  xScale = d3.scale.ordinal (). Domain (thedata.map (function (d) {returns d.to_state;}). Ranges Ranges ([0, W - margin left - margin right]);