d3.select(this).node() is the same as just this in the context of a function passed to a D3 selection. You could rework it like this d3.select(this.parentNode).datum() and get the correct value back without having to use the ugly double-underscore property.
It looks like you are using the wrong selector while updating the axes: svg.selectAll(“g .y.axis”) .call(yAxis); svg.selectAll(“g .x.axis”) .call(xAxis); maybe should read: svg.selectAll(“g.y.axis”) .call(yAxis); svg.selectAll(“g.x.axis”) .call(xAxis);
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.
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
I think you’ll find it works if you assign font-size as a style rather than as an attribute. .style(“font-size”, “34px”) (better yet, assign an id or class attribute and set all your styles in CSS)
The D3 v4 API is here. According to the changelog: D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and axis.orient, D3 4.0 now provides four constructors for each orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft. Therefore, those lines should be: var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;}); var yAxis = d3.axisLeft(yRange); PS: I’m assuming … Read more
In my opinion, the force layout is unsuitable for the purpose of placing labels on a map. The reason is simple — labels should be as close as possible to the places they label, but the force layout has nothing to enforce this. Indeed, as far as the simulation is concerned, there is no harm … Read more
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
This tutorial can help you a lot to create a real time line graph: http://bost.ocks.org/mike/path/ I would like to add a few more comments: Asynchronous data When you do a real time graph, you often get the data asynchroneously, thus you cannot know the exact time between each “point”. For the line, you are lucky … Read more
You can select all the elements below the SVG with the “svg > *” selector, i.e. to remove all of those, do d3.selectAll(“svg > *”).remove();