Уменьшение больших значений для отображения их с помощью D3.js

Question

У меня есть некоторые данные, которые я извлек из графитового API, но у меня возникли проблемы с отображением данных из-за масштаба (большие чтения и эпохи).

Мои данные в формате

var lineData = [
    {
        "target": "my.graphite.target", 
        "datapoints": [
                [1418819.0, 1408544820], 
                [1498919.0, 1408544880], 
                [1418719.0, 1408544940], 
                [1488819.0, 1408545000],
                [1478719.0, 1408545180]
            ]
    }
];

где первая точка в точке данных - это чтение, а вторая - время как эпоха.

Для создания своих весов я использую

var xScale = d3.scale.linear()
                        .range([0, 400])
                        .domain(d3.extent(lineData[0].datapoints, function(d) { return d[1]; }));

var yScale = d3.scale.linear()
                        .range([0, 400])
                        .domain(d3.extent(lineData[0].datapoints, function(d) { return d[0]; }));

Это производит следующее SVG.

<svg width="400" height="400">
    <path d="M-1563473334.4444444,
              7018085.291770574L-1563384334.4444444,
              7018085.591022445L-1563473445.5555556,
              7018085.890274314L-1563395556.6666667,
              7018086.189526185L-1563406778.888889,
              7018087.087281796" 
         stroke="blue" 
         stroke-width="2"
         fill="none"></path>
</svg>

Насколько я понимаю, диапазон и область должны масштабировать точки от данных до диапазона, однако, похоже, этого не происходит. Что я делаю неправильно?

http://jsfiddle.net/5eyq6rk5/2/

Answer 1

Ваш xScale а также yScale указывают на неправильные индексы массива при определении их домена. xScale Шоудл использовать d[0] а также yScale следует использовать d[1]

var xScale = d3.scale.linear()
    .range([0, 400])
    .domain(d3.extent(lineData[0].datapoints, function(d) { return d[0];}));

var yScale = d3.scale.linear()
    .range([0, 400])
    .domain(d3.extent(lineData[0].datapoints, function(d) { return d[1]; }));