x and y are absolute coordinates and dx and dy are relative coordinates (relative to the specified x and y). In my experience, it is not common to use dx and dy on <text> elements (although it might be useful for coding convenience if you, for example, have some code for positioning text and then … Read more
You could use d3py a python module that generate xml pages embedding d3.js script. For example : import d3py import networkx as nx import logging logging.basicConfig(level=logging.DEBUG) G = nx.Graph() G.add_edge(1,2) G.add_edge(1,3) G.add_edge(3,2) G.add_edge(3,4) G.add_edge(4,2) # use ‘with’ if you are writing a script and want to serve this up forever with d3py.NetworkXFigure(G, width=500, height=500) as … Read more
For SVG elements Using something like selection.node().getBBox() you get values like { height: 5, width: 5, y: 50, x: 20 } For HTML elements Use selection.node().getBoundingClientRect()
My answer is close to Jan van der Laan’s, but you can simplify things slightly because you don’t need to compute the geographic centroid; you only need the bounding box. And, by using an unscaled, untranslated unit projection, you can simplify the math. The important part of the code is this: // Create a unit … Read more
It appends a ‘g’ element to the SVG. g element is used to group SVG shapes together, so no it’s not d3 specific.
I assume that what you want is a tooltip. The easiest way to do this is to append an svg:title element to each circle, as the browser will take care of showing the tooltip and you don’t need the mousehandler. The code would be something like vis.selectAll(“circle”) .data(datafiltered).enter().append(“svg:circle”) … .append(“svg:title”) .text(function(d) { return d.x; }); … Read more
Look for ‘responsive SVG’ it is pretty simple to make a SVG responsive and you don’t have to worry about sizes any more. Here is how I did it: d3.select(“div#chartId”) .append(“div”) // Container class to make it responsive. .classed(“svg-container”, true) .append(“svg”) // Responsive SVG needs these 2 attributes and no width and height attr. .attr(“preserveAspectRatio”, … Read more
Here is the solution: d3.select(“svg”).remove(); This is a remove function provided by D3.js.
I found the correct answer here from Mike himself: D3 – how to deal with JSON data structures? If you want to bind your data to a single SVG element, use (…).data([data]) or (…).datum(data) If you want to bind your data to multiple SVG elements (…).data(data).enter().append(“svg”) …..
There’s another way to do this that doesn’t require redrawing the graph, and it involves modifying the viewBox and preserveAspectRatio attributes on the <svg> element: <svg id=”chart” viewBox=”0 0 960 500″ preserveAspectRatio=”xMidYMid meet”> </svg> Update 11/24/15: most modern browsers can infer the aspect ratio of SVG elements from the viewBox, so you may not need … Read more