d3.js

How to use enter (data join) for d3 line graphs

纵然是瞬间 提交于 2021-01-29 06:22:23
问题 I'm trying to understand how we can go about using data joins with line graphs. Most examples I see use datum(), rather than data() with our data join, and a direct mapping of the line function when appending the path element. I think we prefer using datum() in this case because the entire line function is sort of a single path. To understand data joins more though, I would like to see how I could make this work for a single line graph, but the snippet I try below does seem to work. My code:

D3.js - Labeling nodes with image in Force-Layout

早过忘川 提交于 2021-01-29 03:21:59
问题 I have the following code in my Codepen that's able to render the sprites flags (from CSS), yet it's not in the position where it should be based on the nodes's position. In fact, I am able to drag the nodes from the flags sprites from the top! Looking at some console.logs, it seems that d.x and d.y position from function ticked() is not passing when the nodes are called. I am not sure how to fix this issue const width = w - (margin.left + margin.right); const height = h - (margin.top +

SVG animations artifacts on Safari

为君一笑 提交于 2021-01-29 02:06:21
问题 I'm using d3.js to do some svg layout/animations and am running into the problem described by the first example here (only on Safari / Safari mobile): http://www.mysparebrain.com/svgbug.html (e.g., when the rect+text moves, it leaves rendering artifacts in its path) Does anyone know of a workaround for this? The only similar question on SO I could find is this unanswered one: Canvas draws artifacts in Safari for animated, filled bezier curves 回答1: You should definitely file a WebKit bug

SVG animations artifacts on Safari

允我心安 提交于 2021-01-29 02:05:02
问题 I'm using d3.js to do some svg layout/animations and am running into the problem described by the first example here (only on Safari / Safari mobile): http://www.mysparebrain.com/svgbug.html (e.g., when the rect+text moves, it leaves rendering artifacts in its path) Does anyone know of a workaround for this? The only similar question on SO I could find is this unanswered one: Canvas draws artifacts in Safari for animated, filled bezier curves 回答1: You should definitely file a WebKit bug

D3 Axis ticks by Week of Year

▼魔方 西西 提交于 2021-01-28 23:31:02
问题 I am trying to create a D3 chart where I want the ticks to be by Week of Year I would like to generate ticks like so Week 01 2016, Week 02 2016 etc My data has only timestamps that are the beginning of the week for example 6 of Jan 2014 that is Week 01. The problem is: The D3 auto generation of ticks will generate a tick like 8 of January 2016 that If formatted will be Week 01 2016 but the data point is 6 of January 2016 and so the point will appear before the tick with the same format and it

D3 Axis ticks by Week of Year

柔情痞子 提交于 2021-01-28 23:11:39
问题 I am trying to create a D3 chart where I want the ticks to be by Week of Year I would like to generate ticks like so Week 01 2016, Week 02 2016 etc My data has only timestamps that are the beginning of the week for example 6 of Jan 2014 that is Week 01. The problem is: The D3 auto generation of ticks will generate a tick like 8 of January 2016 that If formatted will be Week 01 2016 but the data point is 6 of January 2016 and so the point will appear before the tick with the same format and it

Adding legend to plot - d3

拥有回忆 提交于 2021-01-28 22:58:26
问题 After plotting a donut chart, I'm trying to add some legend, based on the following example: http://bl.ocks.org/ZJONSSON/3918369 However, I'm receiving this error: TypeError: undefined is not an object (evaluating 'n.apply') I've printed the return of line 131 and all the legend names are printed. I don't know what's is causing the undefined error print. This is my main code: var width = 300, height = 300, radius = Math.min(width, height) / 2; var color = d3.scale.ordinal() .range(colorrange)

Capture mouseover in d3 on a leaflet map

喜夏-厌秋 提交于 2021-01-28 21:53:21
问题 Is there a way to combine OpenStreetmap leaflet.js map with d3.js objects in such a way to capture "mouseover" tooltips on d3 objects? In the following example where I would like to create a console "ook" event when the mouse passes over the blue circle: <!DOCTYPE html> <html> <head> <title>d3.js with leaflet.js</title> <script src="http://d3js.org/d3.v4.min.js"> </script> <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"> </script> <link rel="stylesheet" href="https:/

d3 linkHorizontal for straight line curves

久未见 提交于 2021-01-28 21:29:31
问题 Can d3 linkHorizontal be used for straight line curves? If not, am I missing any d3 feature for that kind of link path? Of-course I can always go manual and calculate it myself. From To 回答1: You could use d3.curveStep, which creates a path with right-angle corners: var link = d3.line() .x(function(d,i) { return xScale(i); }) .y(function(d,i) { return yScale(d); }) .curve(d3.curveStep); var width = 500 var height = 500 var margin = 25 var data = [ [3, 7] ] var xScale = d3.scaleLinear() .domain

why the last tick doesn't have values - D3.js

家住魔仙堡 提交于 2021-01-28 20:06:07
问题 The last ticks in x-axis and y-axis don't have values drawn next to them. I cannot figure out why these values are missing. This is the JS code : var xAxisScale = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.x; })]) .range([padding, containerWidth - padding * 2]); var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom"); var xGuide = chartContainer.append('g') .attr("class", "xAxis") .call(xAxis) .attr('transform', 'translate(0 ,' + (containerHeight -padding) + ')');