d3.v3.js范围的多系列折线图

Question

I am creating a multi-series line chart with d3.v3.js .

I am trying to graph 4 different data-series over time. My issue is the range of the data varies a lot. I was wondering how I could go about adjusting my data so everything can be displayed? One of the data series has numbers that are so high, the other series are pushed way down at the bottom of the graph, and are basically illegible.

I want to be able to scale my data so the graph doesn't look ridiculously skewed.

Example Data Set:

0: {date:2013-12-01, a:690558, b:68494, c:1886, d:0}    
1: {date:2013-12-02, a:607800, b:53720, c:1698, d:0}    
2: {date:2013-12-03, a:740914, b:86944, c:2896, d:0}    
3: {date:2013-12-04, a:885053, b:99616, c:3301, d:0}

As you can see, data-set A > B > C > D (d is not really being used yet)

Answer 1

您可以为每条线设置多个Y刻度，然后为轴和刻度线着色，例如与该线相同的颜色以显示哪条线。

Answer 2

This is really a design question, not a programming question, so not totally appropriate here. It depends on the nature of the data and on your visualization's goals. Still..

You can try what tomtomtom suggested, using multiple axes.

You can use a non-linear scale, like d3.scale.sqrt or d3.scale.log .

Or, you can transform all the values into percent change relative to a chosen point in time (often, that time is the beginning of the series). This is exactly how stock price graphs show comparisons between two or more stocks. See example .