d3.js

问题 When I zoom to a specific location on a mouse click and then try to pan or when I'm using the mouse wheel, the zoom behavior jumps. It seems that my zoom level is being restored like it was before the mouse click. Here is my event handler: function click(d) { var x, y, k; if (d && centered !== d) { var centroid = path.centroid(d); x = centroid[0]; y = centroid[1]; k = 4; centered = d; } else { x = width / 2; y = height / 2; k = 1; centered = null; } svgContainer.transition() .attr("transform"

问题 I'm trying to make an arc and fill it with small circles, but I can't add circle in path tag.I have to draw 10 rows of circles inside an Arc that each row contains 10 circles.The circles should be like Tilford Tree,Visit http://bl.ocks.org/mbostock/4063550. Does anyone know what I'm doing wrong? This is my code: var w = 1200, h = 780, x = d3.scale.linear().range([0, w]), y = d3.scale.linear().range([0, h]); var svgContainer = d3.select("body").append("svg").attr("width",w) .attr("height", h)

问题 I am trying to create a bar chart based on the values that are coming, it should show all the label as it is. The bar chart is grouped in nature. I am able to create most of it, but somehow value labels are not coming properly. ["July 02,2017", "July 09,2017", "July 02,2017", "July 12,2017"] Currently scale.ordinal is removing the duplicate values and making scale set like: ["July 02,2017", "July 09,2017", "July 12,2017"] Which is disturbing the chart view. How can I show duplicate values in

问题 I'm working with d3. I create a globe of countries from a json file. The globe has svg paths, and each path has an id. I want to select a path with a particular ID. How would I do that, please? handleGlobe(); $('#panel div').click(function(){ if (this.className == 'represented') { thisID = $(this).attr('id'); focusedCountry = d3.select('path') //??? not sure how to say this p = d3.geo.centroid(focusedCountry); } ... handleGlobe() { var feature; var projection = d3.geo.azimuthal() .scale(380)

问题 I'm working with d3. I create a globe of countries from a json file. The globe has svg paths, and each path has an id. I want to select a path with a particular ID. How would I do that, please? handleGlobe(); $('#panel div').click(function(){ if (this.className == 'represented') { thisID = $(this).attr('id'); focusedCountry = d3.select('path') //??? not sure how to say this p = d3.geo.centroid(focusedCountry); } ... handleGlobe() { var feature; var projection = d3.geo.azimuthal() .scale(380)

问题 I am creating a map with leaflet and d3. A lot of circles will be plotted on a map. In terms of browser compatibility, there is an expected limit of how many svg elements the browser can render. In terms of user experience however, I would prefer that the user can see as many elements on the map as possible (otherwise the user might need to zoom in and out constantly and would need to wait for the ajax to return data). There will be some optimisation that I need to consider (user waiting time

问题 I have been struggling to get this example: http://bl.ocks.org/mbostock/3894205 ...to work with json so I can use it in a portlet with live data. I can see the data elements if I do an alert but the component isn't rendering. I only get the y axis and its label to show up. The part that may be wrong is: d3.json("data.json", function(error, data) { if(error) return console.warn(error); data.data.forEach(function(d) { d.date = parseDate(d.date); d["San Francisco"]= +d["San Francisco"]; d["New

问题 I am new to d3.js library, and I am trying to understand the concept of domain and ranges. I read Scott Murray's book, but I don't know how to calculate it. I have this: var scale = d3.scale.linear() .domain([100, 500]) .range([10, 350]); scale(100); //Returns 10 scale(300); //Returns 180 scale(500); //Returns 350 I know that 100 units of my input represent 10 in my output, and the same with 500 and 350... but why 180 is returned for 300 as input? How can I calculate this value? I read this

问题 I am new to d3.js library, and I am trying to understand the concept of domain and ranges. I read Scott Murray's book, but I don't know how to calculate it. I have this: var scale = d3.scale.linear() .domain([100, 500]) .range([10, 350]); scale(100); //Returns 10 scale(300); //Returns 180 scale(500); //Returns 350 I know that 100 units of my input represent 10 in my output, and the same with 500 and 350... but why 180 is returned for 300 as input? How can I calculate this value? I read this

问题 I'm trying to project a set of points ([long, lat] tuples) on top of an SVG map of my home country Austria: https://commons.wikimedia.org/wiki/File:Austria-geographic_map-blank.svg The description of the SVG file on Wikimedia gives a projection name and the bounds of the map: Lambert Conformal Conic, WGS84 datum Geographic limits of the map: West: 17.2° W East: 9.3° W North: 49.2° N South: 46.0° N Naive as I am, I thought this information would be enough to create the right kind of projection