Javascript εφαρμογη με d3.js και καρτεσιανο συστημα συντεταγμενων.

[zaranero]

Εχω τον εξης κωδικα που βρηκα http://bl.ocks.org/GerHobbelt/3671490 και θα ηθελα να τον τροποποιησω ωστε να δειχνει σαν ενα κανονικο καρτεσιανο συστημα συντεταγμενων δλδ και τις αρνητικες τιμες σε σχημα ενος σταυρου.

Αν μπορειτε να δωσετε καποια βοηθεια , γιατι δεν μπορω να το πετυχω.

Ευχαριστω.

[axxis]

Δοκίμασε το παρακάτω στη θέση του script.js

Spoiler:

//Width and height
var w = 400;
var h = 400;
var padding = 8;
var scale_padding = 20; // space to show axes


var dataset = [
 [80, 20, 10, 60] ];  // x, y, w, h


//Create scale functions
var xScale = d3.scale.linear()
    .domain([-100, 100])
    .range([padding + scale_padding, w - padding]);

var yScale = d3.scale.linear()
    .domain([-100, 100])
    .range([h - padding - scale_padding, padding]);

//Define X axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(10);

//Define Y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(10);

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Create circles
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
/*
Your y-axis is -linear and SVG doesn't accept negative widths, not does it accept x2/y2 < x1/y1 if you
would use <rect x1 y1 x2 y2> instead, so coordinate pair flipping is in order...

This is the way to do it, particularly important when your scales are not linear (but, say, logarithmic),
but keep in mind that YOU must still guarantee that those width & hieight values are always positive!

Of course, such work might best be done in the preparation phase rather than right here.
*/
    .attr("x", function (d) {
        var x = Math.min(xScale(d[0]), xScale(d[0] + d[2]));
        return x;
    })
    .attr("y", function (d) {
        var y = Math.min(yScale(d[1]), yScale(d[1] + d[3]));
        return y;
    })
    .attr("width", function (d) {
        // return xScale(d[2]);  -- only works like that for +linear scale;
        var x2 = Math.max(xScale(d[0]), xScale(d[0] + d[2]));
        var x1 = Math.min(xScale(d[0]), xScale(d[0] + d[2]));
        return x2 - x1;
    })
    .attr("height", function (d) {
        var y2 = Math.max(yScale(d[1]), yScale(d[1] + d[3]));
        var y1 = Math.min(yScale(d[1]), yScale(d[1] + d[3]));
        return y2 - y1;
    });

//Create X axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - scale_padding)/2 + ")")
    .call(xAxis);

//Create Y axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + (w + scale_padding)/2 + ",0)")
    .call(yAxis);

Στο σημείο που φτιάχνει τα xScale και yScale, έχω βάλει hardcoded τα όρια σε -100, 100.
Ο αρχικός κώδικας, υποτίθεται ότι για το άνω όριο της κλίμακας, έπαιρνε το μέγιστο από το 100 και τα στοιχεία του dataset ώστε αν κάποιο στοιχείο του dataset είναι μεγαλύτερο από 100, να προσαρμόζει ανάλογα την κλίμακα.
Αυτό δεν έπαιζε σε μένα οπότε το έβαλα hardcoded σε 100.

Να διευκρινίσω ότι δεν έχω ιδέα από d3 οπότε αν και φαίνεται ότι παίζει, μπορεί να μην είναι η σωστή λύση.

[zaranero]

Amazing ..... ευχαριστω.

Spoiler:

//Width and height
        var w = 400;
        var h = 400;
        var padding = 8;
        var scale_padding = 20; // space to show axes
        var dominx = -100;
        var domaxx = 100;
        var dominy = -100;
        var domaxy = 100;
        var scaledx = 1;
        var scaledy = 1;
        var dataset = [
         [80, 20, 20, 60]];  // x, y, w, h
        
        var domaxx2=d3.max(dataset, function (d) {
            return d[0];  //References first value in each subarray
        });
        var dominy2 = d3.min(dataset, function (d) {
            return d[1];  //References first value in each subarray
        });
        var xpositive = Math.abs(dominx);
        var y2positive = Math.abs(dominy2);

        if (domaxx2 > domaxx) {

            scaledx = domaxx2 / domaxx;
            scaledy = scaledx;
        }
        if (y2positive > xpositive) {

            scaledy = y2positive / xpositive;
            scaledx = scaledy;
        }


        if (domaxx2 > domaxx && y2positive > xpositive) {
            
            scaledx = domaxx2 / domaxx + y2positive / xpositive;
            scaledy = domaxx2 / domaxx + y2positive / xpositive;
           
        }
        
        //Create scale functions
        var xScale = d3.scale.linear()
            .domain([dominx*scaledx, domaxx*scaledx])
            .range([padding + scale_padding, w - padding]);

        var yScale = d3.scale.linear()
            .domain([dominy*scaledy, domaxy*scaledy])
            .range([h - padding - scale_padding, padding]);

        //Define X axis
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(10);

        //Define Y axis
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .ticks(10);

        //Create SVG element
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        //Create circles
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
        /*
        Your y-axis is -linear and SVG doesn't accept negative widths, not does it accept x2/y2 < x1/y1 if you
        would use <rect x1 y1 x2 y2> instead, so coordinate pair flipping is in order...
        
        This is the way to do it, particularly important when your scales are not linear (but, say, logarithmic),
        but keep in mind that YOU must still guarantee that those width & hieight values are always positive!
        
        Of course, such work might best be done in the preparation phase rather than right here.
        */
            .attr("x", function (d) {
                var x = Math.min(xScale(d[0]), xScale(d[0] + d[2]));
                return x;
            })
            .attr("y", function (d) {
                var y = Math.min(yScale(d[1]), yScale(d[1] + d[3]));
                return y;
            })
            .attr("width", function (d) {
                // return xScale(d[2]);  -- only works like that for +linear scale;
                var x2 = Math.max(xScale(d[0]), xScale(d[0] + d[2]));
                var x1 = Math.min(xScale(d[0]), xScale(d[0] + d[2]));
                return x2 - x1;
            })
            .attr("height", function (d) {
                var y2 = Math.max(yScale(d[1]), yScale(d[1] + d[3]));
                var y1 = Math.min(yScale(d[1]), yScale(d[1] + d[3]));
                return y2 - y1;
            });

        //Create X axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (h - scale_padding) / 2 + ")")
            .call(xAxis);

        //Create Y axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + (w + scale_padding) / 2 + ",0)")
            .call(yAxis);

Εκανα και το scale να δουλευει προχειρα .... θα φτιαξω αργοτερα και το w,h να κανει scale καθως να αφαιρεσω και πολλες μεταβλητες ισως που χρησιμοποιω για να απλοποιησω λιγο τον κωδικα. Ευχαριστω με ξεκολλησες.

[zaranero]

Εχουμε λοιπον το var dataset = [ [80, 20, 20, 60]]; // x, y, w, h

Εφτιαξα καποια input fields που μπορει ο χρηστης αντι να ειναι hard coded 80,20,20,60 κλπ να περναει ο χρηστης δεδομενα πχ 10,10,10,10 και ιδου η απορια. Ας πουμε οτι θελω να φτιαξω 10 rectangles στο ιδιο svg ... πως θα κανω το dataset κατα καποιο τροπο δυναμικο δλδ του στυλ dataset[[80,20,20,60],[60,60,60,60],[30,30,30,30]........] και παει λεγοντας. Καμμια ιδεα?

- - - Updated - - -

problem solved .... ηταν εξαιρετικα απλο το λαθος που εκανα .... απιστευτο εκαψα ολα τα εγκεφαλικα μου κυταρα να το βρω .... θα επανερθω με αλλα

[Παπι]

Για να μην καψει και αλλα κυτταρα, μαθε να δουλευεις με debugger. Ειναι ΤΟ εργαλειο. Θα σε βοηθησει αφανταστα.