CODEWITHSUNDEEP
javascripthtmlsvgd3.js
iJade
iJade

Reputation: 23791

d3js graph plotting at incorrect coordinates

i was trying to draw simple d3js graph.I got through drawing the axis and even plotted the data but the data isn't appearing where it is expected to be.

As per my json data below

var d1 = [{
        value1: "30",
        value2: "10"
    }];

i'm trying to plot a circle at coordinates x axis 30 and y axis 10but the circle on the graph appears some where else.

Here is the jsfiddle demo

Here is my code

    var d1 = [{
            value1: "30",
            value2: "10"
        }];



function Update(){
   var circles = vis.selectAll("circle").data(d1)
    circles
        .enter()
            .insert("svg:circle")
                .attr("cx", function (d) { return d.value1; })
                .attr("cy", function (d) { return d.value2; })
                .style("fill", "red")
    circles
        .transition().duration(1000)
            .attr("cx", function (d) { return d.value1; })
            .attr("cy", function (d) { return d.value2; })
            .attr("r", function (d) { return 5; })

    circles.exit ()
        .transition().duration(1000)
            .attr("r", 0)
                .remove ();


}



/*************************************************/


/*******************Real Stuff starts here*******************/

var vis = d3.select("#visualisation"),
  WIDTH = 600,
  HEIGHT = 400,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0,100]),
  yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,300]),


  xAxis = d3.svg.axis() // generate an axis
       .scale(xRange) // set the range of the axis
       .tickSize(5) // height of the ticks
       .tickSubdivide(true), // display ticks between text labels
  yAxis = d3.svg.axis() // generate an axis
       .scale(yRange) // set the range of the axis
       .tickSize(5) // width of the ticks
       .orient("left") // have the text labels on the left hand side
       .tickSubdivide(true); // display ticks between text labels 

function init() {
  vis.append("svg:g") // add a container for the axis
  .attr("class", "x axis") // add some classes so we can style it
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
  .call(xAxis); // finally, add the axis to the visualisation

  vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
}
init();





$('#btn').click(function(){
    Update();
});

Upvotes: 0

Views: 1184

Answers (4)

Andy897
Andy897

Reputation: 7133

Actually it is working fine. It is just that top left corner is (0,0) and not bottom left (as I suspect, you must be assuming).

Set both x,y to 0. Circle will appear at top left corner.

Upvotes: 0

chopper
chopper

Reputation: 6709

You will need to apply xScale and yScale to your coordinates to transform them into the plotting space.

See this jsFiddle

.attr("cx", function (d) { return xRange(d.value1); })
.attr("cy", function (d) { return yRange(d.value2); })

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

It works if you

  • define the numbers as numbers and not as strings (i.e. value1: 30 instead of value1: "30") and
  • use the scales you define (i.e. return xRange(d.value1) instead of return d.value1).

Working jsfiddle here.

Upvotes: 1

Joe Beuckman
Joe Beuckman

Reputation: 2296

Your circle is appearing at pixel (30,10), but that doesn't correspond to the place 30,10 as labeled by your axes. Use your scales to set the point's location.

            .attr("cx", function (d) { return xRange(d.value1); })
            .attr("cy", function (d) { return yRange(d.value2); })

Upvotes: 1

Related Questions