a wrapper function for overflowing text: function wrap() { var self = d3.select(this), textLength = self.node().getComputedTextLength(), text = self.text(); while (textLength > (width – 2 * padding) && text.length > 0) { text = text.slice(0, -1); self.text(text + ‘…’); textLength = self.node().getComputedTextLength(); } } usage: text.append(‘tspan’).text(function(d) { return d.name; }).each(wrap);
d3.csv is an asynchronous method. This means that code inside the callback function is run when the data is loaded, but code after and outside the callback function will be run immediately after the request is made, when the data is not yet available. In other words: first(); d3.csv(“path/to/file.csv”, function(rows) { third(); }); second(); If … Read more
I’m going to go out on a limb here and equate SVG support with D3 support, since (in my opinion) that’s the most useful part of the library. With that in mind, this link should give you the exact browser versions that support it: http://caniuse.com/svg And this matches what you pasted from the D3 site: … Read more
for remote data.json replace : d3.tsv(“data.tsv”, function(error, data) {…} with : d3.json(“data.json”, function(error, data) { console.log(data); // this is your data }); for local data: var myData = { {date:’2013-05-01′, frequency:99}, {date:’2013-05-02′, frequency:24} }; function draw(data) { console.log(data); // this is your data } draw(myData);
In order to make angular and other frameworks play nice is to wrap the “other” frameworks using directives. http://docs.angularjs.org/guide/directive The thing that you want to do is to tell angular when data has been updated by the “other” frameworks. If angular doesn’t need to know, then your task is simpler. Here is an example that … Read more
The text-anchor attribute works as expected on an svg element created by D3. However, you need to append the text and the circle into a common g element to ensure that the text and the circle are centered with one another. To do this, you can change your nodes variable to: var nodes = svg.append(“g”) … Read more
As explained in the other answers, SVG does not have a notion of a z-index. Instead, the order of elements in the document determines the order in the drawing. Apart from reordering the elements manually, there is another way for certain situations: Working with D3 you often have certain types of elements that should always … Read more
UPDATE 05/04/2018: It is my understanding d3 has changed a lot (for the better) to be a lot more modular. For those who are looking towards this answer, this was using a much older version of d3 (specifically v3). A lot of the findings are still relevant for the d3-hierarchy package under cluster.size() and cluster.nodeSize() … Read more
As for Ordinal Scales: Ordinal scales have a discrete domain, such as a set of names or categories. An ordinal scale’s values must be coercible to a string, and the stringified version of the domain value uniquely identifies the corresponding range value. So, as an example, a domain of an ordinal scale may contain names, … Read more
Assuming that you have Mike Bostock’s standard margins defined and you have defined a linear scale for the y-axis the following code will create horizontal gridlines without using tickSize(). svg.selectAll(“line.horizontalGrid”).data(yScale.ticks(4)).enter() .append(“line”) .attr( { “class”:”horizontalGrid”, “x1” : margin.right, “x2” : width, “y1” : function(d){ return yScale(d);}, “y2” : function(d){ return yScale(d);}, “fill” : “none”, “shape-rendering” : … Read more