score:0
When I tried the node solution, some of my data disappeared (?), so I just added a new class called "dodo" which worked for me:
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.time); })
.attr("cy", function(d) { return y(d.place); })
.style("fill", function(d) { return color(d.species); });
svg.selectAll(".dodo")
.data(data)
.enter().append("text")
.attr("class", "dodo")
.attr("x", function(d) { return x(d.time); })
.attr("y", function(d) { return y(d.place); })
.attr("dx", ".71em")
.attr("dy", ".35em")
.text(function(d) { return d.name;});
score:16
Mike Robinson, your example helped.
For those who are wondering, here is what I did:
I removed:
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", 12);
and added:
var node = svg.selectAll("g")
.data(data)
.enter()
.append("g");
node.append("circle")
.attr("class", "dot")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", 12);
node.append("text")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.text("fooLabelsOfScatterPoints");
I appended "text" tags onto "g" tags, as opposed to appending "text" tags onto "circle" tags.
Source: stackoverflow.com
Related Query
- d3.js: How to add labels to scatter points on graph
- How can I add labels inside the points in a scatterplot?
- How to add labels to c3.js scatter plot graph?
- d3 v4 how to add data labels to bar graph
- How to add a click event on nvd3.js graph
- Add Unique Links to all d3.js Data Points in Graph
- How to properly get text width to center labels above graph bars?
- How to mark discrete points on a time series graph using D3 / Rickshaw?
- How to add a title for a NVD3.js graph
- How to add label to edges in d3 graph
- How do I add labels to d3.js force bubble chart
- How do i add two different shapes to D3 forced directed graph based on shape field value?
- How to add a dynamic legend to a D3 force directed graph in Apex?
- how do i add a zoom in and zoom out button in a graph on d3
- How to add custom tick labels in d3.js?
- How to add custom colors in D3 nodes of a graph
- How to add a line graph to a scatterplot using d3?
- How to hide and show points on a line graph
- How to add a legend and labels to the pie chart?
- d3.js line and area graph - want to add a extra line defined by two points and representing a threshold/minimum value (for ease of viewing)
- How to display value labels above graph bars?
- How to add a d3js graph in slideshow instead of body?
- How can I identify scatter plot data points that are included in a D3 brush?
- how to add mouse events to force directed graph using the d3 canvas renderer?
- How to correctly add labels to the d3 pie chart?
- D3: Add data value labels to multi line graph
- How to add labels into the arc of a chord diagram in d3.js
- D3 : How to add labels top of in each bar in grouped bar chart
- How do I add a click event to a directed graph using dagre d3.js(javascript library)?
- How can I add axis labels to a sankey diagram in d3?
More Query from same tag
- Dictate colors via column in rawgraph/d3
- variable scope inside of d3 reusable API
- d3.js example works on example website but not on my server?
- How to get the result of zoom.translate() without altering the sensibility of panning?
- geoChoroplethChart map that displays cities / points of interest with tags
- d3 example does not work on a html page
- Accessing nest elements by their keys with d3.js
- Transitioning sunburst in D3.js
- Graph orientation and node positioning in d3.js
- Using D3 and blobs to render svg to image
- D3.js chart responsive behavior
- dc/d3 line chart crashing down to 0 on the y axis after filtering
- Passing a function to d3's .data()
- d3 js transition not working
- document.getElementById() does not work with puppeteer finding and id on a <path> element on SVG
- Fetching and processing data with semicolon delimiters and no headers
- How to obtain coordinate of d3 label text?
- d3.js histogram not working with array of total frequency for each bins
- D3 JavaScript return data value plus variable from anonymous function
- D3 Line Graph - Single line seems to be fragmenting into several
- Enter() statement with a function from one data array to multiple arrays? (Adding multiple Gradient Paths)
- d3.js: get tick format from time scale
- Is there a way to apply transitions to numbers formated as currency in D3?
- How to wrap d3.svg.line?
- Saving a SVG, background image is left out
- Programmatically setting d3 zoom transform
- What's a good strategy to move crosshairs in a plot interactively?
- put hellip (...) to a text that is inside of bar in d3.js
- Draw dashed outer line with D3
- How to add text to svg circle in d3