javascript - D3 : Retrieve data from SVG -

-

is possible retrieve data svg via d3?

i have following scenario: on page resize need update widths of svg generated on server via d3 . example x-axis. client side d3 library has no knowledge of svg. noticed each dom object there __ chart__ object. there way can access range , domain example , update them accordingly?

when create svg on server , transfer client, actual svg dom gets transferred, not javascript objects or properties (such d3 __data__ property) used in creating it.

so in order attach data svg elements gets passed file, need create attribute of element contains data. can select element client side , parse data attribute.

example:

/*** server side ***/ /* if `bars` d3 selection of rectangles in bar graph */ bars.attr("data-name", function(d){return d.name;})     .attr("data-value", function(d) {return d.value;});  /*** client side ***/ var bars = d3.selectall("rect.bar")              .datum(function(){                 return {                   name: this.getattribute("data-name"),                   value: this.getattribute("data-value")                 }              })              .on("click", function(d,i){                  /* data */              });

that works if data in question few numbers or names want use in tooltips or similar interaction. doesn't work complex object chart function. if you're need redraw/resize chart client-side, don't see performance benefit in trying draw graphs server-side.

you can create server scripts parse data ready-to-use format, maybe run d3 layout functions create ready-to-draw json array. draw graph client-side.


Comments

Post a Comment

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

-
i used pyinstaller create standalone exe file pyqt project. did not use single file option because exe created single file option takes long open. therefore, pyinstaller created dist folder contains bunch of files including program.exe file. create setup.exe file place contents of dist folder in program directory , create shortcut in start menu , on desktop. want super simple user. maybe setup.exe files when download program cnet. found inno-setup, looks promising. however, not know if there special considerations because program standalone program create python/pyqt program. thanks! have experience task? there program using task not know about? inno-setup or nsis easiest use. tell them files include , put them , create nice installer you. wrote short tutorial on experiences using innosetup might find helpful: http://www.blog.pythonlibrary.org/2008/08/27/packaging-wxpymail-for-distribution/ note tutorial based around wxpython app wrote, concepts same.
Read more

c# - Access objects in UserControl from MainWindow in WPF -

-
i have simple xaml, how can change text property of textblock in usercontrol1 mainwindow ? <window x:class="refactorxaml.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:refactorxaml="clr-namespace:refactorxaml" title="mainwindow" height="350" width="525"> <grid> <grid.rowdefinitions> <rowdefinition height="100"></rowdefinition> <rowdefinition height="100"></rowdefinition> </grid.rowdefinitions> <grid> <refactorxaml:usercontrol1></refactorxaml:usercontrol1> </grid> <grid grid.row="1"> <button>change text</button> </grid> </grid> </window> <usercon...
Read more

javascript - How to name a jQuery function to make a browser's back button work? -

-
i'm trying write function ajaxyfy web site, works perfect, except function button. that's have now: function loading() { if (typeof history.pushstate !== "undefined") { var historycount = 0; $('.menu-item, .logo').on('click','a',function(e){ e.preventdefault(); $(this).data('clicked', true); if ($(this).is('.logo a')) { var homepage = $(this).attr('href'); function1(homepage); history.pushstate(null, null, homepage); } else if ($(this).is('.projects a')) { var projects = $(this).attr('href'); function2(projects); history.pushstate(null, null, projects); } else { var pages = $(this).attr('href'); function3(pages); history.pushstate(null, null, pages); ...
Read more