Tag: d3.js

d3 js – loading json without a http get

I am learning d3. There are certain ways of loading the data in d3 js. But all of them seem to make a HTTP GET. In my scenario, I already have the json data in a string. How can I use this string instead of making another http request? I tried to look for documentation […]

Understanding how D3.js binds data to nodes

I’m reading through the D3.js documentation, and am finding it hard to understand the selection.data method from the documentation. This is the example code given in the documentation: var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; var tr = […]

Highlight selected node, its links, and its children in a D3 force directed graph

I am working on a force directed graph in D3. I want to highlight the mouseover’d node, its links, and its child nodes by setting all of the other nodes and links to a lower opacity. In this example, http://jsfiddle.net/xReHA/, I am able to fade out all of the links and nodes then fade in […]

Updating SVG Element Z-Index With D3

What is an effective way to bring an SVG element to the top of the z-order, using the D3 library? My specific scenario is a pie chart which highlights (by adding a stroke to the path) when the mouse is over a given piece. The code block for generating my chart is below: svg.selectAll(“path”) .data(d) […]

d3 axis labeling

How do I add text labels to axes in d3? For instance, I have a simple line graph with an x and y axis. On my x-axis, I have ticks from 1 to 10. I want the word “days” to appear underneath it so people know the x axis is counting days. Similarly, on the […]

D3 javascript Difference between foreach and each

What is the difference between forEach and each in D3js?

D3.js: “Uncaught SyntaxError: Unexpected token ILLEGAL”?

I’ve just downloaded D3.js from d3js.org (link to zip file), unzipped it, and referenced it in the following HTML page: <html> <head> <title>D3 Sandbox</title> <style> </head> <body> <script src=”/d3.v3.js”></script> </body> </html> But when I load this page, my console (in Chrome) is giving me this error: Uncaught SyntaxError: Unexpected token ILLEGAL: line 2 It doesn’t […]

x >= x pattern in JavaScript

When reading source of D3.js I saw x >= x pattern. If it is for detecting NaNs among numbers, why not just isNaN(x) or x == x? Source, where I encountered it: d3.min = function(array, f) { var i = -1, n = array.length, a, b; if (arguments.length === 1) { while (++i < n) […]

D3.js: How to get the computed width and height for an arbitrary element?

I need to know exactly the width and height for an arbitrary g element in my SVG because I need to draw a selection marker around it once the user has clicked it. What I’ve seen in the internet is something like: d3.select(“myG”).style(“width”). The problem is that the element will not always have an explicit […]

Is there a way to zoom into a D3 force layout graph?

D3 has a force directed layout here. Is there a way to add zooming to this graph? Currently, I was able to capture the mouse wheel event but am not really sure how to write the redraw function itself. Any suggestions? var vis = d3.select(“#graph”) .append(“svg:svg”) .call(d3.behavior.zoom().on(“zoom”, redraw)) // <– redraw function .attr(“width”, w) .attr(“height”, […]