CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

Show the complete Cartesian plane in d3.js

I am using this data structure:

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

I currently have a series of data that I would like to put on a line chart. the data are in the key "voltaje" being the x-axis and the "y-axis" being "corriente". for some strange reason the points do not show up well. that's my problem. I want to show it as in the image of the complete Cartesian plane.

enter image description here

I have points that can be negative on the y-axis, like others that may be negative on the x-axis. this is why I want to display the data in my line chart, using a complete Cartesian plane as the image.

enter image description here

the intervals of the x axis and the y axis, I want them to be dynamic, based on the data, but apparently something I must be doing wrong. How can i fix this? Sorry for my english level, I have tried to translate it in the best way possible.

I need something like this:

enter image description here

this is my code:

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

thanks!

Upvotes: 2

Views: 1621

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Two main changes in your code.

First, you have to convert your strings to numbers and, then, sort your data:

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

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

Second, you have to correctly set your domains:

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]);

Here is your plunker with those changes: http://plnkr.co/edit/Z8uqp0DOdEapOFOPCZFO?p=preview

EDIT: since you shared the wrong plunker in your question, here is the correct one, updated: http://plnkr.co/edit/58ZJv4RCy91q6H8w7Pxl?p=preview

Upvotes: 1

Related Questions