javascript - How do I make my D3 collapsible chart, collapsible? -

-

i've created hierarchical chart using d3 , want make collapsible. i'm prety new d3 i'm getting used understanding code. need width between nodes increase don't know how this. text overlaps eachother why need expand width between each node. can too?

d3 code:

var margin = {top: 40, right: 120, bottom: 20, left: 120},   width = 960 - margin.right - margin.left,   height = 500 - margin.top - margin.bottom;  var = 0;  var tree = d3.layout.tree()   .size([height, width]);  var diagonal = d3.svg.diagonal()   .projection(function(d) { return [d.x, d.y]; });  var svg = d3.select("body").append("svg")   .attr("width", width + margin.right + margin.left)   .attr("height", height + margin.top + margin.bottom)   .append("g")   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    root = treedata[0];    update(root);    function update(source) {      // compute new tree layout.     var nodes = tree.nodes(root).reverse(),         links = tree.links(nodes);      // length of link     nodes.foreach(function(d) { d.y = d.depth * 100; });      // declare nodes…     var node = svg.selectall("g.node")       .data(nodes, function(d) { return d.id || (d.id = ++i); });      // enter nodes.     var nodeenter = node.enter().append("g")       .attr("class", "node")       .attr("transform", function(d) {          return "translate(" + d.x + "," + d.y + ")";        });      nodeenter.append("circle")       .attr("r", 8)       .style("fill", "#fff");      nodeenter.append("text")       .attr("y", function(d) {         return d.children || d._children ? -18 : 18;        })       .attr("dy", ".35em")       .attr("text-anchor", "middle")       .text(function(d) { return d.name; })       .style("fill-opacity", 1);      // declare links…     var link = svg.selectall("path.link")       .data(links, function(d) { return d.target.id; });      // enter links.     link.enter().insert("path", "g")       .attr("class", "link")       .attr("d", diagonal);    }

perhaps mike bostock's work on collapsible tree http://bl.ocks.org/mbostock/4339083

you can observe adding collapse function, , attaching mouse events nodes enables nodes collapsible.

you want add codes involving nodeexit , nodeupdate.

to fix problem of texts overlapping 1 - observe code part append text nodeenter. 

nodeenter.append("text")   .attr("y", function(d) {     return d.children || d._children ? -18 : 18;    })   .attr("dy", ".35em")   .attr("text-anchor", "middle")   .text(function(d) { return d.name; })   .style("fill-opacity", 1);

play around numbers -18 : 18. increasing numbers may texts not overlap 1 another, numbers adjust distance of texts , nodes. may want play around "text-anchor". try instead: 

nodeenter.append("text")     .attr("x", function(d) {             return d.children || d._children ? -10 : 10;     })     .attr("dy", ".35em")     .attr('class', 'nodetext')     .attr("text-anchor", function(d) {         return d.children || d._children ? "end" : "start";     })     .text(function(d) {         return d.name;     })     .style("fill-opacity", 0);

lastly, if want understand d3 tree fully, link phenomenal source http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html


Comments

Post a Comment

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

-
Image
i have similar problem described in how prevent numbers being changed exponential form in python matplotlib figure : i don't want (in special case) weird scientific formatting of axis. problem different have problem @ z -axis. 2-d plots can use ax.get_yaxis().get_major_formatter().set_useoffset(false) . , there no function ax.get_zaxis() what use format z -axis same way? edit: example: from mpl_toolkits.mplot3d import axes3d import numpy np import sys import matplotlib import matplotlib.pyplot pyplot def func(xi, ti): res = 10e3 + np.cos(ti) * np.sin(xi) return res if __name__ == '__main__': timespacing = 20 timestart = 0 timeend = 1 time = np.linspace(timestart, timeend, timespacing) widthspacing = 50 widthstart = 0 widthend = 3 width = np.linspace(widthstart, widthend, widthspacing) reslist = [] matplotlib.rcparams['legend.fontsize'] = 10 fig = pyplot.figure() ax = fig.gca(projection = '3d...
Read more

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

-
i install web server database on raspberry pi (little computer). computer has 1gb ram. i want know best combination: linux distribution , web server , dbms run local server multiple users minimal latency, use php on server. , best settings performance , not have bugs (memory usage, disable plugin, disable service, etc)? i thought light debian , lighttpd server , sqlite database. solution? i think lighttpd + sqlite great choice. linux distro, debian @ centos or tiny core linux , although i'm not sure of compatibility pi. obviously, can't go wrong raspbian if want use in production , more stable performance, few more pi's , set them in cluster .
Read more

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -

-
i developing app in xamarin android. have splash screen serialize class , pass mainactivity using intent . when try deserialize in mainactivity error message : "serializationexception unable find constructor use types" serialization : void loaddata() { currency currency = new currency(this); intent = new intent(this, typeof(mainactivity)); intent.putextra("currency", newtonsoft.json.jsonconvert.serializeobject(currency)); startactivity(intent); } deserialization : cur = newtonsoft.json.jsonconvert.deserializeobject<currency> (intent.getstringextra("currency")); // error here class constructor : public currency(context context) { thiscontext = context; } i began experiencing problem after added parameter context context constructor. has caused this? how can solve it? possible serialize/deserialize class has parameters? you need have empty constructor in currency class in order deserialize it. ...
Read more