在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