使用D3.js缩放大的值以显示它们

Scaling large values down to display them with D3.js

本文关键字：显示 D3 js 缩放 放大 使用      更新时间：2023-09-26

我有一些数据，我已经从石墨API检索，但我有一些麻烦绘制数据由于规模(大读数和时代)。

我的数据格式为

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

，其中数据点的第一个点是读数，第二个点是作为epoch的时间。

创建我的尺度，我使用

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/

您的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]; }));
相关文章：