{"id":1022,"date":"2018-02-21T16:50:57","date_gmt":"2018-02-21T15:50:57","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1022"},"modified":"2022-07-25T08:35:45","modified_gmt":"2022-07-25T07:35:45","slug":"d3-v4-update-enter-exit-example-javascript","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/d3-v4-update-enter-exit-example-javascript\/","title":{"rendered":"D3 v4 update Enter\/Exit Example Javascript"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n\t<meta charset=\"UTF-8\" \/>\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/4.13.0\/d3.min.js\"><\/script>\r\n\t<style>\r\n\t\t* {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t\tborder: 0;\r\n\t\t}\r\n\r\n\t\tbody {\r\n\t\t\tbackground: #ffd;\r\n\t\t}\r\n\t<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\t<svg width=\"200px\" height=\"100vh\"><\/svg>\r\n\t<script>\r\n\t\tvar svg = d3.select('svg');\r\n\t\tvar rect = svg.node().getBoundingClientRect();\r\n\r\n\t\tvar r = function() {\r\n\t\t\treturn 20 + Math.random() * 50;\r\n\t\t};\r\n\r\n\t\tvar update = function(data) {\r\n\t\t\tconsole.log('update');\r\n\r\n\t\t\tvar count = data.length;\r\n\t\t\tvar min = Math.min.apply(null, data),\r\n\t\t\t\tmax = Math.max.apply(null, data);\r\n\r\n\t\t\tvar dataScale = d3.scaleLinear().domain([min, max]).range([0, 100]);\r\n\t\t\tvar percentToPixelScale = d3.scaleLinear().domain([0, 100]).range([0, rect.height]);\r\n\r\n\t\t\tvar getR = function(d, i) {\r\n\t\t\t\treturn d;\r\n\t\t\t};\r\n\t\t\tvar getY = function(d, i) {\r\n\t\t\t\treturn percentToPixelScale((i + 1) * (100 \/ (count + 1)))\r\n\t\t\t};\r\n\r\n\t\t\t\/\/ elements to update\r\n\t\t\tvar u = svg.selectAll('circle')\r\n\t\t\t\t.data(data);\r\n\r\n\t\t\t\/\/ on exit remove\r\n\t\t\tu.exit().remove();\r\n\r\n\t\t\t\/\/ elements to add\r\n\t\t\tenter = u.enter()\r\n\t\t\t\t.append('circle')\r\n\t\t\t\t.attr(\"cy\", getY)\r\n\t\t\t\t.attr(\"fill\", \"red\");\r\n\r\n\t\t\tenter\r\n\t\t\t\t.merge(u)\r\n\t\t\t\t.transition()\r\n\t\t\t\t.ease(d3.easeExp)\r\n\t\t\t\t.attr('r', getR)\r\n\t\t\t\t.attr('cx', r)\r\n\t\t\t\t.attr(\"cy\", getY)\r\n\t\t\t\t.duration(600);\r\n\t\t}\r\n\r\n\t\tvar dataSet = [10, 23, 15];\r\n\t\tupdate(dataSet);\r\n\r\n\t\tsetInterval(function() {\r\n\t\t\tdataSet.push(r() \/ 4);\r\n\t\t\tupdate(dataSet);\r\n\t\t}, 1000);\r\n\t<\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n\t<meta charset=\"UTF-8\" \/>\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/4.13.0\/d3.min.js\"><\/script>\r\n\t<style>\r\n\t\t* {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t\tborder: 0;\r\n\t\t}\r\n\r\n\t\tbody {\r\n\t\t\tbackground: #ffd;\r\n\t\t}\r\n\t<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\t<svg width=\"100%\" height=\"99vh\"><\/svg>\r\n\t<script>\r\n\t\tvar svg = d3.select('svg');\r\n\t\tvar path = svg.append(\"path\");\r\n\t\tpath.attr(\"fill\", \"none\")\r\n\t\t\t.attr(\"stroke\", \"steelblue\")\r\n\t\t\t.attr(\"stroke-linejoin\", \"round\")\r\n\t\t\t.attr(\"stroke-linecap\", \"round\")\r\n\t\t\t.attr(\"stroke-width\", 2);\r\n\t\tvar rect = svg.node().getBoundingClientRect();\r\n\r\n\t\tvar r = function() {\r\n\t\t\treturn 20 + Math.random() * 50;\r\n\t\t};\r\n\r\n\t\tfunction getRandomColor() {\r\n\t\t  var letters = '0123456789ABCDEF';\r\n\t\t  var color = '#';\r\n\t\t  for (var i = 0; i < 6; i++) {\r\n\t\t    color += letters[Math.floor(Math.random() * 16)];\r\n\t\t  }\r\n\t\t  return color;\r\n\t\t}\r\n\r\n\t\tvar update = function(data) {\r\n\t\t\tvar count = data.length;\r\n\r\n\t\t\tvar dataValues = data.map(function (d) {\r\n\t\t\t\treturn d.value;\r\n\t\t\t});\r\n\t\t\tvar min = Math.min.apply(null, dataValues),\r\n\t\t\t\tmax = Math.max.apply(null, dataValues);\r\n\r\n\t\t\tvar dataScale = d3.scaleLinear().domain([min, max]).range([0, 100]);\r\n\t\t\tvar percentToPixelXScale = d3.scaleLinear().domain([0, 100]).range([0, rect.width]);\r\n\t\t\tvar percentToPixelYScale = d3.scaleLinear().domain([0, 100]).range([0, rect.height]);\r\n\r\n\t\t\tvar getX = function (d, i) {\r\n\t\t\t\tvar v = (i + 1) * (100 \/ (count + 1));\r\n\t\t\t\treturn percentToPixelXScale(v);\r\n\t\t\t};\r\n\r\n\t\t\tvar getY = function(d, i) {\r\n\t\t\t\tvar v = 100 - dataScale(d.value);\r\n\t\t\t\treturn percentToPixelYScale(v)\r\n\t\t\t};\r\n\r\n\t\t\tvar getR = function(d, i) {\r\n\t\t\t\treturn d.value;\r\n\t\t\t};\r\n\r\n\t\t\t\/\/ elements to update\r\n\t\t\tvar u = svg.selectAll('circle')\r\n\t\t\t\t.data(data);\r\n\r\n\t\t\t\/\/ on exit remove\r\n\t\t\tu.exit().remove();\r\n\r\n\t\t\tvar line = d3.line()\r\n\t\t\t\t\/\/.data(data)\r\n\t\t\t    .x(getX)\r\n\t\t\t\t.y(getY)\r\n\t\t\t\t.curve(d3.curveMonotoneX); \/\/ apply smoothing to the line\r\n\r\n\r\n\t\t\t\/\/ \/\/ elements to add\r\n\t\t\t\/\/ enter = u.enter()\r\n\t\t\t\/\/ \t.append('circle')\r\n\t\t\t\/\/ \t.attr(\"cy\", getY)\r\n\t\t\t\/\/ \t.attr(\"fill\", function (d, i) {\r\n\t\t\t\/\/ \t\treturn d.color;\r\n\t\t\t\/\/ \t});\r\n\t\t\t\/\/u.enter()\r\n\t\t\tpath\r\n\t\t\t\t.datum(data)\r\n\t\t\t\t\/\/.transition()\r\n\t\t\t\t\/\/.ease(d3.easeLinear)\r\n\t\t\t\t.attr(\"d\", line)\r\n\t\t\t\t\/\/.duration(10);\r\n\t\t\t\t\/\/.attr(\"transform\", null)\r\n\t\t\t\t\/\/.transition()\r\n\t\t\t\t\/\/.attr(\"transform\", \"translate(\" + getX(0, -1) + \")\");\r\n\r\n\t\t\t\/\/ enter\r\n\t\t\t\/\/ \t.merge(u)\r\n\t\t\t\/\/ \t.transition()\r\n\t\t\t\/\/ \t.ease(d3.easeLinear)\r\n\t\t\t\/\/ \t.attr('r', Math.sqrt(count \/ 2))\r\n\t\t\t\/\/ \t.attr('cx', getX)\r\n\t\t\t\/\/ \t.attr(\"cy\", getY)\r\n\t\t\t\/\/ \t.duration(400);\r\n\t\t}\r\n\r\n\r\n\t\tvar len = 200;\r\n\t\tvar dataSet = new Array(len).fill().map(() => { return { value: 0, color: '#000000' }; });\r\n\t\tupdate(dataSet);\r\n\r\n\t\tvar oldVal = 0;\r\n\t\tsetInterval(function() {\r\n\t\t\tdataSet.push({ value: oldVal , color: getRandomColor() });\r\n\t\t\toldVal += r() - 45;\r\n\t\t\tif (dataSet.length > len) {\r\n\t\t\t\tdataSet.shift();\r\n\t\t\t}\r\n\r\n\t\t\tupdate(dataSet);\r\n\t\t}, 100);\r\n\t<\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ \/> <script src=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/4.13.0\/d3.min.js”><\/script> <style> * { margin: 0; padding: 0; border: 0; } body { background: #ffd; } <\/style> <\/head> <body> <svg width=”200px” height=”100vh”><\/svg> <script> var svg = d3.select(‘svg’); var rect = svg.node().getBoundingClientRect(); var r = function() { return 20 + Math.random() * 50; }; var update = function(data) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-1022","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1022"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1022\/revisions"}],"predecessor-version":[{"id":1026,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1022\/revisions\/1026"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}