简体   繁体   中英

Rescale axis ticks and text in d3.js multi y-axis plot

I have a parallel coordinates plot that is based off this code: http://bl.ocks.org/syntagmatic/2409451

I am trying to get the tick marks and the numbers on the y axes to scale from the min to the max of the data rather than autoscaling to the conveniently linear numbers like it currently done.

I have not been able to find any example of using d3 or js where a plot of any sort does this unless the data happens to land on those values.

I have been able to just show the min and max value, but cannot get ticks between these by replacing the 3rd line of //Add an axis and title with:

.each(function(d) {d3.select(this).call(d3.svg.axis().scale(y[d]).tickValues(y[d].domain()).orient("left")); })

For reference, the data file is read in as a .csv and ends up looking like this with alphabet representing the headings in the .csv file:

var example_data = [
                   {"a":5,"b":480,"c":250,"d":100,"e":220},
                   {"a":1,"b":90,"c":50,"d":33,"e":88}
];

EDIT:

The main issue is iterating over the array that has the domains for each column to create a new array with the tick values. Tick values can be set using:

d3.svg.axis().scale(y[d]).tickValues(value 1[d],value 2[d], etc)

y[d] is set by:

// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
return d != "name" && (y[d] = d3.scale.linear()
    .domain(d3.extent(cars, function(p) { return +p[d]; }))
    .range([h, 0]));
}));

Since you have the min and the max you can map them in any way you want to any scale you want [y0,yn]. For example with y0 = 100, yn = 500 (because HTML counts from top and down).

Here I use a linear scale

d3.scale.linear()
    .domain([yourMin,yourMax])
    .range([y0,yn]);

Does this help?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM