javascript - Removing previous paths in d3.js with transition to new data -

-

I am currently running a page that generates a graph with default value on page load. Takes data from a TSV generated from PAP script, is modified by GET parameter.

The user can make input options, and update the graph via AAAG.

The page is currently working almost, but it is overlay new paths with new data without deleting the old path

New data is the same X range and domain , But different y coordination values, sometimes with different numbers.

Ideally, I would prefer the old routes with liver transitions. Old Path - How can I make it?

I tried to include the relevant code below, sorry for its poor quality, I am very new to D3. 

  ... var line = d3.svg.line (). Interpolate ("base"). Defined (function (d) {Return D. Reset! = 0;}) X (function (D) {Return X (D DETet);}). Y (function (D) {return Y (D. rattleslitt);}); Var svg = d3.select ("chart") .attr ("width", width + margin.left + margin.right) .attr ("height", height + margin.top + margin.bottom) .append ("G ") .attr (" conversion "," translation ("+ margin. Left +", "+ margin.Top +") "); Var txtDays = 7; Var txtStartDate = "01/01/2013"; Var txtEndDate = "01/01/2014"; Var txtInterval = 1; Requested dataURL = // SO d3.tsv ("http: // localhost" + requestDataURL, removed for function (error, data) {var varPolls = d3.keys (data [0]). Filter (function (key) {Return key! == "date";}); Data for (formerly (function (d) {d.date = parseDate (d.date);}); var results = varPolls.map (function (name) { Return {name: value}: data.map (function (d) {return: date: d, dt, result: + d [name]}}}}};}); x.domain (d3.extent (data, Function (d) {return d.date;}); svg.append ("g") .attr ("class", "x axis") .attr ("transform", "translate (0," + height + ")") .call (xAxis); svg.append ("g") .attr ("class", "y axis") .k L (yAxis) var group = svg.selectAll ("group"). Data (result) .enter () .append ("g") .attr ("class", "group") .attr ("data-name ", Function (d) {return d.name;}); group.append (" path ") .attr (" class "," line ") .attr (" d ", function (d) {return line .values;;}} style ("stroke", function (d) {return color [d. Name];}); group.epend ("text"). Data (function (d) {returns {name: Name, Value: D Value [d.values. Long - 1]}; }) .attr ("transform", function (d) {return "translation (" + x (d.value.date) + "," + y (d.value.result) + ")";}) .attr ("X", 3) .attr ("dy", ".35em") .text (function (d) {returning mathrade (d.value.result) ;;}); D3.select ("submit") .attr ('disabled', null); }); Click $ ("Submit.") (Function) {var data = []; // out-of-date var REQ = $ .exx ({url: requestDataURL, datatype: 'text', success: function ) {Data = response;}}); request data = URL = // new data was removed for SO $. When (req) .done (function () {d3.tsv ("http: // localhost" + requestDataURL , Function (error, data) {Var varPolls = d3.keys (data [0]) .filter (function (key) {return key! == "date";}) {D.date = parseDate (d) .date);}); var Return = varPolls.map (function (name) {returns: {name: name, value: data.map (function (d) {returns {date: d.date, result: + d [name]}}}}}}; };); X.domain (d.) (Data, function (d) {return de depth;}); var group = svg.ltl ("chart"). Data (result ("group", "group" ) .attr ("data-name", function (d), group.ext () {Return d.name;}); group.append ("path") .attr ("class", "line") .attr ("D", function (d) {return line (d.values);}). Style ("stroke", function (d) {return color [d. Name]; }); Group.transition () .duration (500) .ease ("linear") .attr ("d", group); }); }); });    
 
 
 The problem is that you are not selecting and updating entries correctly As a rule, the opted operation should only enter the selections, should not be updated. When you are getting new data, you have the following code:  
  group.enter (). Attachments ("g"); // ... group.append ("path");   
 This will add a new  path  element to the update selection, which you see in the graph. The correct way to handle new data will be seen as follows:  
  var enterSel = group.enter (). Annex ("G"); // G elements on set elements enterSel.append ("path"); // Add path path to new g element group. Selection ("Path") // Select the path elements present, new attachments are added to it .attr ("d", function (d) {// Update d attribute return line (d.values);});   
 This code will add new elements to the data elements on which there is no related element and update  path  for existing elements.

Comments

Post a Comment

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

-
I have a SKScene where I am adding an SKSpriteNode I have subclassed the SKSpriteNode class to create this node. In the subclass I am defining some SKActions on Sprite. What do I want to do when the end of this phantom ends the SKAction sequence, then I add a new Prayer node to this scene. How is this possible. The following code is mine: The code for the sequence is that I'm running on the Scansprinitode subclass (TEMissileNode): - SKAction * moveDown = [SKAction moveToY: Self.position.y - 20 Duration: 0.2]; SKAction * animation = [SKAction animateWithTextures: textures timePerFrame: time / 7]; SKAction * moveMissileProjectile = [SKAction Moving: Pointoffscreen Term: Time]; SKAction * group = [SKAction group: @ [animation, movement projectile]]; SKAction * Sequence = [SKAction Sequence: @ [Hilldown, Group, [SKAction removalFromParent]]]; [Self run action: sequence]; From the main scene, I call those actions that execute these tasks TEMissileNode * missile = [tmissil...
Read more

Matlab transpose a table vector -

-
An embarrassing simple question seems to be, but how can I move a Matlab table vector? aTableT = aTable '; I tried a standard syntax for the simple interaction of a line vector to a line vector aTable : ATableT = reshape (aTable, 1, Height (aTable)); and aTableT = rot90 (aTable); According to the head, the last time table should work for table, see. However, I get this error code: Error type in using table / permit (line 396) Undefined function 'permute' for the input arguments. Error in rot 90 (line 29) b = magnitude (b, [2 1 3: ndims (a)]); NB: fliplr is not useful either pretty sure I have covered clear angles - any ideas? Thanks! Try changing your table into an array, move it, then back to a table In other words, try doing this: aTableArray = table2array (aTable); ATableT = array 2table (aTableArray. '); I have also read the document for rot90 , and it says that rot90 is definitely working for tables Do, and I find you...
Read more

c# - Textbox not clickable but editable -

-
I have a small form with 10 text boxes, I have set them in the correct tab order. I want them on my tab service I was wondering if there is a way to set the text box so that they can be selected for editing until they are tabbed. That is ... I do not want the end user to edit the text box to click on them, I just want to make them editable through tabu. this should do the trick public partial category poor text box: Text Box {Safe Override Zero WndProc (Ref: Message Message) {if (m.msg == (Int) WM.LBUTTONDOWN) {Return; // mount down events} base.WndProc (ref m); }} Window message enum can be found. How to do this without anherizing: text box : class EatMouseDown: netwindows {safe override zero WndProc (ref message message) {if (m.msg == (int) WM.LBUTTONDOWN) {return; } Base.WandProc (Ref M); }} Safe Override Zero Onload (EventEurge E) {base.OnLoad (e); How to do this without any part: left a clean part, whatever is important, this can be a buggy but it works R...
Read more