Try creating a new Date object before the tick for the x-axis gets passed to the formatter: .tickFormat(function(d) { return d3.time.format(‘%b %d’)(new Date(d)); }) See the documentation for d3.time.format to see how you can customize the formatting string.
In CSS, something like: path { fill: none; stroke: #646464; stroke-width: 1px; stroke-dasharray: 2,2; stroke-linejoin: round; }
The 3D scatterplot linked to by VividD and Lars Kotthoff is probably the best example of what you’re asking for, but I’m going to be contrary and suggest that maybe you’re asking the wrong question. Trying to simulate three spatial dimensions on a flat screen will always be imperfect and make it difficult to read … Read more
Unfortunately, the answer to your question does not exist. There is no built-in mechanism in D3 that repels edges or minimizes edge crossings. You would think it wouldn’t be that hard to implement a charge on an edge, but here we are. Furthermore, there doesn’t seem to be any mechanism anywhere that reduces edge crossings … Read more
The event isn’t actually overridden, but both are triggered — the onclick handler for the SVG and for the bar. To prevent this, use the .stopPropagation() method (see the documentation). The code looks like this: rect.on(“click”, function() { console.log(“rect”); d3.event.stopPropagation(); }); Complete example here. Compare with the behaviour with stopping the propagation of the event … Read more
Raphael is not built on D3. Raphael will help you draw elements. D3 is more comprehensive and will help you bind data to elements. So I’d say D3 is more powerful. This forum discussion Discusses presenting a SIMILE timeline using D3, they refer to this project which implements a timeline in D3. So at first … Read more
UPDATE (July 8th 2016) This answer applies to d3 v3.x — NOT v4.x. For the latter version, see Tim Hayes’s answer, also on this page. Or… just swap attr with attrs in my answer below, and don’t forget to require/import/script-embed d3-selection-multi. And… don’t miss the bit about using .each, which may be useful to you. … Read more
Yes, there is, and it’s aptly named invert. console.log(scale.invert(10)); //Returns 100 console.log(scale.invert(180)); //Returns 300 console.log(scale.invert(350)); //Returns 500
The signature of d3.json has changed from D3 v4 to v5. It has been moved from the now deprecated module d3-request to the new d3-fetch module. As of v5 D3 uses the Fetch API in favor of the older XMLHttpRequest and has in turn adopted the use of Promises to handle those asynchronous requests. The … Read more
The problem is not within .size(), it’s that you are stating the SVG dimensions in .attr(“width”, w) .attr(“height”, h). Remove these two attributes and you’ll get it right… var svg = d3.select(“#viz”).append(“svg”) .attr(“id”, “playgraph”) //better to keep the viewBox dimensions with variables .attr(“viewBox”, “0 0 ” + w + ” ” + h ) .attr(“preserveAspectRatio”, … Read more