line chart problems

24 views
Skip to first unread message

dms

unread,
May 22, 2013, 7:21:52 PM5/22/13
to d3...@googlegroups.com
Hi,

I am developing a d3 chart plotting some biological data to it, but I am having some problems while trying to implement a simple line chart into my svg.


I have:

my variable max_[0] is the one with all necessary data:

console:
max_[0]
Object {key"MOT_10"valuesArray[256]}
  1. key"MOT_10"
  2. valuesArray[256]
    1. [0 … 99]
      1. 0Object
        1. MAX0.833333
        2. MOTIF_NAME"MOT_10"
        3. POSITION26773
        4. __proto__Object
      2. 1Object
...

My simple code:

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { console.log(d.POSITION); return x(d.POSITION); })
    .y(function(d) { console.log(d.MAX); return ySeqLogo(d.MAX); });

and then I try to draw the line chart like this:


 var lll = svg.selectAll(".line")
 .data(max_[0]);
 lll
 .enter().append("svg:path")
 //lll.exit().remove();
 //lll
          .attr("class", "line")
          .attr("d", function(d) {debugger ; return line(d.values);});

Nothing happens ! 

Looking for my var lll on console, I have:

lll
[
Array[1]
  1. 0undefined
  2. length1
  3. parentNodesvg.[object SVGAnimatedString]
  4. __proto__Array[0]
0:indefined ? it should be [object SVGAnimatedString] right ?

What am I doing wrong ?

Any insight is appreciated.


P.S.: if I use: svg.append("svg:path").attr("d", line(max_[0].values));
"it works", but I need to redraw it whenever the user moves the pan/zoom, so I am not able to exit().remove().

dms

unread,
May 22, 2013, 8:29:27 PM5/22/13
to d3...@googlegroups.com
Now it works, but I my .delete().remove() doesn't !

function drawLine(){
getMotifMax(view.left, view.right, "MOT_10");

  var lll = svg.selectAll(".line")
  .data(max_);
lll.exit().remove();  
lll.enter().append("g")
        .attr("class", "motifs");
lll.append("path")
.attr("class", "line")
.attr("d", line(max_[0].values));
}

everytime I move my brush I call this function, but it doesn't redraw/update my line chart :(
what am I doing wrong ?

dms

unread,
May 22, 2013, 8:36:52 PM5/22/13
to d3...@googlegroups.com
Never mind !

the solution:

I draw my line cheart,

then I have an update function that resends the new data, like this:

function redrawLine(){
getMotifMax(view.left, view.right, "MOT_10");

svg.selectAll(".line")
  .data(max_) 
  .attr("d", line(max_[0].values));
}


hope it can help someone any other time.
Reply all
Reply to author
Forward
0 new messages