最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - d3.js : non linear graph axis - Stack Overflow

programmeradmin3浏览0评论

I am trying to add a custom scale on an axis, such as below

The idea is that a tick is always 2 times bigger than a previous tick.

My understanding is that this is a custom scale. I did a bit of research & could not find anything like it.

So I guess my question is actually two questions:

  1. Is this scale "standard" in the mathematical world?

  2. Is this possible to implement this using d3.js ?

Any link to related tutorial or live example (ie. jsFiddle) is also wele.

EDIT: I have now asked a related question on mathematica.stackexchange to help me find the solution to this problem & will update this post after I have tried a few things.

I am trying to add a custom scale on an axis, such as below

The idea is that a tick is always 2 times bigger than a previous tick.

My understanding is that this is a custom scale. I did a bit of research & could not find anything like it.

So I guess my question is actually two questions:

  1. Is this scale "standard" in the mathematical world?

  2. Is this possible to implement this using d3.js ?

Any link to related tutorial or live example (ie. jsFiddle) is also wele.

EDIT: I have now asked a related question on mathematica.stackexchange. to help me find the solution to this problem & will update this post after I have tried a few things.

Share Improve this question edited Apr 13, 2017 at 12:55 CommunityBot 11 silver badge asked Jun 16, 2014 at 15:35 AdrianoAdriano 20k19 gold badges105 silver badges140 bronze badges 5
  • Have you considered using logarithmic scales instead? – Oleg Commented Jun 16, 2014 at 15:41
  • Yes, I actually had the same idea at first. I did get it to work with my log scale (default base, so base 10). But this is not "good enough"... – Adriano Commented Jun 16, 2014 at 15:43
  • Been trying but can't get this to work. Could you modify the scale on the Y axis on this example jsbin./isuris/484 to show how I could similarly use ordinal? – Adriano Commented Jun 16, 2014 at 16:03
  • My initial suggestion was bad. I'll try to look into it later this evening, but I think it's definitely possible. – Oleg Commented Jun 16, 2014 at 16:08
  • Alright, thx. I'll keep investigating on my side & will update this post if I find a solution. – Adriano Commented Jun 16, 2014 at 16:09
Add a ment  | 

1 Answer 1

Reset to default 9

Polylinear scales can be used in this scenario. From linear scale api documentation:

Although linear scales typically have just two numeric values in their domain, you can specify more than two values for a polylinear scale. In this case, there must be an equivalent number of values in the output range. A polylinear scale represents multiple piecewise linear scales that divide a continuous domain and range.

Here's an example that fits your requirements:

// Your custom scale:
var customScale = d3.scale.linear()
        .domain([125,250,500,1000,2000])
        .range([0,50,100,150,200]);

// The axis uses the above scale and the same domain:
var axis = d3.svg.axis()
        .scale(customScale)
        .tickValues([125,250,500,1000,2000]);

Knowing the number of ticks as well as the extents of domain and range, the putation of both arrays is trivial (note that they must be of equal length).

发布评论

评论列表(0)

  1. 暂无评论