Had the same issue, though I initially thought it is because of security restrictions of browser, that wasn’t the case. It worked when I added the charset to the script tag as shown below: <script src=”http://d3js.org/d3.v3.min.js” charset=”utf-8″></script> The same is shown in the d3 docs, though it doesn’t mention this issue specifically: http://d3js.org/ Yes, having … Read more
I recently came across this again, and fortunately have managed to isolate the problem and work around it. It was actually due to something being registered in the mousedown event, which was moving the DOM element svg:circle to the top based on a z-order. It does this by taking it out the DOM and re-inserting … Read more
I was able to dynamically add nodes by adding the following code in the toggle function: $.getJSON(addthese.json, function(addTheseJSON) { var newnodes = tree.nodes(addTheseJSON.children).reverse(); d.children = newnodes[0]; update(d); }); Notes: I am using jQuery to retrieve the json file
One of these two should do it for you. Just specify axis.ticks(10) to specify the number of tick marks or axis.tickValues([1,2,4]) to specify the actual tick marks that should appear. Since you are using dates, you’ll need to do something like this: .ticks(d3.time.weeks, 2) You can read more about time intervals at https://github.com/mbostock/d3/wiki/Time-Intervals. You can … Read more
I asked me the same question two years ago. I didn’t know what the grey bars respectively the System category stand for. It was hard to find an official answer because the only thing the Chrome DevTools Docs said was “Activity that was not instrumented by DevTools”. But this statement was removed since there is … Read more
First of all, it’s worth noting that the second argument in the insert function is a before selector. Furthermore, chained operations act on the left hand result. So you have done // select all the g elements (only 1) d3.select(“g”) // For each g, insert a text element before “path.data” .insert(“text”, “path.data”); You want to … Read more
This question is similar to the one you posted in the d3-js Google Group. Without duplicating what I wrote there, I would reiterate that you probably don’t want d3.dispatch; that is intended for custom event abstractions (such as brushes and behaviors). It’ll be simpler to use native events. If you want your legend to change … Read more
The proper solution is to retrieve ticks using .ticks() method, filter them to keep only integers and pass them to .tickValues(): const yAxisTicks = yScale.ticks() .filter(tick => Number.isInteger(tick)); const yAxis = d3.axisLeft(yScale) .tickValues(yAxisTicks) .tickFormat(d3.format(‘d’)); For completeness here is explanation why other solutions are bad: @BoomShakalaka solution uses .tickSubdivide() method, which no longer exists. @cssndrx and … Read more
Just use d3.selectAll(data).size().Hope this example help you: var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; var tr = d3.select(“body”).append(“table”).selectAll(“tr”) .data(matrix) .enter().append(“tr”); var td = tr.selectAll(“td”) .data(function(d) { return d; }) .enter().append(“td”) .text(function(d) { return d; }); var tdSize=tr.selectAll(“td”).size(); Complete … Read more
D3 is for charts and mostly static graphs. Cytoscape.js lets you manipulate highly-customisable and interactive graphs, and has an API as easy to use as jQuery. D3 is for arbitrary SVG. This means that although it can be used to make lots of different things, you have to build the renderer, interaction, and model yourself. … Read more