score:9
You can append circles for each point of a given city:
city.append("g").selectAll("circle")
.data(function(d){return d.values})
.enter()
.append("circle")
.attr("r", 2)
.attr("cx", function(dd){return x(dd.date)})
.attr("cy", function(dd){return y(dd.temperature)})
.attr("fill", "none")
.attr("stroke", "black")
Result: http://bl.ocks.org/ChrisJamesC/5896521/943f325deacb4a533e086d56478c1e76b6c6b4bd
By the way, this method does not work with the basis
interpolation as points seem to be far from the line. You might have to do more work if you need the interpolation but I doubt that as highlighting each points of the curve certainly means that you want to have their exact position.
EDIT: In order to have a the circle to be the same color as the line, you need to access the data of the parentNode:
.attr("stroke", function(d){return color(this.parentNode.__data__.name)})
New result: http://bl.ocks.org/ChrisJamesC/5896521/83d7c5c04f7d031d3c71b4d6fd5b5193366d9fed
Source: stackoverflow.com
Related Query
- Adding circles to multiline graph with d3.js
- Adding circles to multi line graph with dropdown on d3.js
- D3.js: Adding a time axis to a bar graph with negative values
- Adding anchor tag to SVG circles appended with D3
- D3 force directed graph nodes with nested circles
- Adding tooltips to circles from an array with D3 JavaScript
- Error parsing with multiline graph in D3
- Issues with adding a link via mouse click to two nodes in force directed graph
- D3.js: Moving circles along with line in a 2D graph when zoomed
- Need assistance with adding text into nodes in codeflower graph via D3.js
- Error: parsing d="MNaN,260L on D3.js multiline graph with JSON data
- Circles aren't updating in a multiline graph
- producing a "live" graph with D3
- Adding FontAwesome icons to a D3 graph
- Real time line graph with nvd3.js
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- random colors for circles in d3.js graph
- Create points on a D3 multiline graph
- Adding and Removing Nodes in D3js Force Graph
- Graph with auto layout using d3 (a tree with multiple parent nodes)
- d3.js adding legend to multiline series chart
- D3: finding graph y-coordinate with mouseover
- Adding text to the center of a D3 Donut Graph
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- D3 updating graph with new elements create edges with the wrong nodes
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- Adding a horizontal line to d3 graph displays at the wrong value
- D3: skip null values in line graph with several lines
- Wrapping great circles with Mercator maps with D3.js, Leaflet, or Mapbox
- Adding child elements to specific nodes in a force-directed graph using d3js
More Query from same tag
- D3.js nest function, cannot get data into hierarchy
- Isn't clip path resizable for mozilla browser
- D3 Bar Chart Bars Color Scaling
- How to specify custom children and parent property for tree layout in D3
- d3 force map renders the links incorrectly after re-render
- How to style SVG node with :before pseudo element
- Saving D3.JS example "bullet.html" to SVG
- D3.JS time-series line chart with real-time data, panning and zooming
- d3 update pattern of nested data model
- How to keep a crosshair out from the margins in d3.js?
- Modify Barwidth or Display Size in Collapsible Indented Tree
- jQuery c3 chart show block instead of line
- Troubles viewing Git Gist on bl.ocks.org
- d3 contextmenu not firing
- Creating a d3 v4 histogram with an ordinal scale
- D3 force layout only shows one link
- How to add a separator in D3 bar chart D3V3
- How to center a map on something other than the prime meridian in d3.js?
- How to set up custom color scale with multiple sub-parts in D3?
- Draw line between rectangle from border to border
- D3 force layout by node size
- Parse Date by YEAR-WEEK pattern in JavaScript and D3
- Load multiple SVGs into javascript array without DOM append
- How do I shut down a python simpleHTTPserver?
- Database - Front End Application Structure
- Add number / text inside d3 path
- Why do my DOM elements lose their location attributes when I size my SVG based on container size?
- Invalid value for<path> attribute in d3.js
- Search d3 force directed graph
- Problems with immutable array