I just had the same issue, and I found the way to fix it without recompiling d3. https://github.com/mbostock/d3/wiki/Localization The documentation mentions the function d3.locale, this one builds the functions used for formatting numbers and dates. So if you call it with your own localization rules, you’re half way there. var myFormatters = d3.locale({ “decimal”: “.”, … Read more
The D3 functions all seem to assume you’re starting with GeoJSON. However, I don’t actually think you need the centroid for this – what you really need is the bounding box, and fortunately this is available directly from the SVG DOM interface: function getBoundingBoxCenter (selection) { // get the DOM element from a D3 selection … Read more
OK, let’s say you have an array of numbers as your dataset, and this includes some positive and negative values: var data = [-15, -20, -22, -18, 2, 6, -26, -18]; You’ll want two scales to construct a bar chart. You need one quantitative scale (typically a linear scale) to compute the bar positions along … Read more
Since D3.js v3 has a nice collection of methods to load data from external resources¹, It’s better to you not embed data into your page, you just load it. This will be an answer by example. Let’s start with a model definition: # models.py from django.db import models class Play(models.Model): name = models.CharField(max_length=100) date = … Read more
If your data is an array, your original code will work, if you get rid of the brackets around data: var data = [32710,20280,18002]; console.log(data); console.log(d3.min(data)); console.log(d3.max(data)); If you need to identify the array values with the keys “01”,”02″, “03”, create an array of objects, and operate on the values to get min/max: //data as … Read more
Well I could find the solution browsing through, posting it here for anyone needing help on this topic. The idea is to create an object of the graph and playing around with the nodes and links arrays. The JS code goes as: var graph; function myGraph(el) { // Add and remove elements on the graph … Read more
D3v4 answer If you are here looking for the same but with D3 v4, var zoom = d3.zoom().on(“zoom”, function(){ svg.attr(“transform”, d3.event.transform); }); vis = svg.append(“svg:svg”) .attr(“width”, width) .attr(“height”, height) .call(zoom) // here .call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(0.5)) .append(“svg:g”) .attr(“transform”,”translate(100,50) scale(.5,.5)”);
You can make the chart resize using a combination of viewBox and preserveAspectRatio attributes on the SVG element. See this jsfiddle for the full example: http://jsfiddle.net/BTfmH/12/ var svg = d3.select(‘.chart-container’).append(“svg”) .attr(“width”, ‘100%’) .attr(“height”, ‘100%’) .attr(‘viewBox’,’0 0 ‘+Math.min(width,height)+’ ‘+Math.min(width,height)) .attr(‘preserveAspectRatio’,’xMinYMin’) .append(“g”) .attr(“transform”, “translate(” + Math.min(width,height) / 2 + “,” + Math.min(width,height) / 2 + “)”); You … Read more
The idomatic way of doing is with nesting: var divs = d3.select(‘#parent’).selectAll(‘p’).data(data).enter().append(‘div’); divs.append(‘p’) divs.append(‘p’) Which creates: <div id=”parent”> <div> <p> from data[0] </p> <p> from data[0] </p> </div> <div> <p> from data[1] </p> <p> from data[1] </p> </div> <div> <p> from data[2] </p> <p> from data[2] </p> </div> </div> If that won’t work, save your … Read more
Fortunately, drawing 2000 circles is a pretty easy example to test. So here are four possible implementations, two each of Canvas and SVG: Canvas geometric zooming Canvas semantic zooming SVG geometric zooming SVG semantic zooming These examples use D3’s zoom behavior to implement zooming and panning. Aside from whether the circles are rendered in Canvas … Read more