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 shoudl使用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]; }));

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

1 个答案: