javascript - 在 d3.js 中显示完整的笛卡尔平面

Question

我正在使用这个数据结构:

oData = [{
            "ciclo": "ciclo1",
            "values": [{
                "voltaje": -0.002,
                "corriente": -5329166
            }, {
                "voltaje": -2,
                "corriente": -5579166
            }]
        }

我目前有一系列数据想放在折线图上。数据在键“voltaje”中，x 轴和“y 轴”是“corriente”。由于某些奇怪的原因，这些点没有很好地显示出来。那是我的问题。我想将其显示为完整笛卡尔平面的图像。

我有一些点可以在 y 轴上为负，就像其他点在 x 轴上可能为负一样。这就是为什么我要在我的折线图中显示数据，使用完整的笛卡尔平面作为图像。

x 轴和 y 轴的间隔，我希望它们是动态的，基于数据，但显然我一定做错了。我怎样才能解决这个问题？ 对不起我的英语水平，我已经尽力以最好的方式翻译它。

我需要这样的东西:

这是我的代码:

var svg = d3.select("#chartline").append("svg").attr("width",670).attr("height",500),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.linear().range([0, width]),
    y =  d3.scale.linear().range([height, 0]);


    var line =  d3.svg.line()
    //.curve(d3.curveBasis)
    .interpolate("basis")
    .x(function(d) { return x(d.voltaje); })
    .y(function(d) { return y(d.corriente); });

    d3.extent([].concat.apply([], oData), d => d.voltaje);

    y.domain([
      d3.min(oData, function(c) { return d3.min(c.values, function(d) { return d.corriente; }); }),
      d3.max(oData, function(c) { return d3.max(c.values, function(d) { return d.corriente; }); })
    ]);

http://plnkr.co/edit/0GOaeVOqng3taPzT94CV?p=preview

谢谢!

Answer 1

代码中的两个主要更改。

首先，您必须将字符串转换为数字，然后对数据进行排序:

data.forEach(function(d) {
    d.datax = +d.datax;
    d.datay = +d.datay;
});

data.sort(function(a, b) {
    return d3.ascending(a.datax, b.datax)
});

其次，您必须正确设置您的域:

var maxX = d3.max(data, function(d) {
    return Math.abs(d.datax);
})
var maxY = d3.max(data, function(d) {
    return Math.abs(d.datay);
});

x.domain([-maxX, maxX]);
y.domain([-maxY, maxY]);

这是您进行了这些更改后的插件:http://plnkr.co/edit/Z8uqp0DOdEapOFOPCZFO?p=preview

编辑:由于您在问题中分享了错误的 plunker，这里是正确的，已更新:http://plnkr.co/edit/58ZJv4RCy91q6H8w7Pxl?p=preview