When you do this:
svg.append("text") .attr("transform", "translate(100,0)") .attr("x", 50) .attr("y", 50) .attr("font-size", "24px") .text(heading)
You are appending a
<text> element to the SVG (and the
svg selection). So far, so good.
Now comes this:
svg.selectAll("text") .data(data) .enter() //etc...
And this is what's happening: as you are selecting all
<text> elements, you are in fact selecting that first one we mentioned, and binding data to it. Because of that, your enter selection has
n - 1 elements.
For a better explanation, please see my explanation here: Selecting null: what is the reason behind 'selectAll(null)' in D3.js?
Solution: Select nothing...
svg.selectAll(null) .data(data) .enter() //etc...
... or, if you plan to have an update selection, select by a given class.
- Missing first value while creating a bar graph
- While creating a bar graph using d3 how to associate the bar height with the numbers on the scale?
- d3 Missing first value in array
- Bar graph colors based on value in c3.js
- Calculate height of bar in pixels from a Y value in D3 graph
- Show first value in year axis, regardless of what month graph starts on
- D3.JS bar graph column offset while adding new data
- d3js bar graph with x+y axes: x axis value distribution
- Dynamically get different colors while building stacked bar graph in d3
- text & mouse over and mouse out value on bar graph in d3.js
- Negative height value error for bar graph in d3.js
- Creating a border around your D3 graph
- D3 Bar Graph example not working locally
- 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
- how do i format the value shown in a d3 graph
- D3.js: Changing the color of the bar depending on the value
- dc.js barChart first and last bar not displaying fully
- d3 bar chart y axis ticks and grid lines above max value
- d3 Update stacked bar graph using selection.join
- Append Value to Rickshaw Graph Axis and what is ticksTreatment and Preserve
- c3 graph in a dark background; how to change axis and tick value color
- How to move grid lines behind bar graph in d3.js?
- How to use tool tip in Line bar graph using D3 js
- 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)
- D3 bar chart not showing first element in array
- d3.js graph code creating extra nodes
- How to display value labels above graph bars?
- d3 time scale - last bar on graph is appearing outside of the graph
- 2 arrays one of values one of colors make D3 bar chart have color at same index of value
More Query from same tag
- Using fields in inherited bound data
- Drawing path from 2 dataset
- Select and append a single element in a node with D3
- Radial Tree - Root node issue
- D3 Circle-Packing Clear Labeling Solution
- D3 throws "Cannot read property 'ownerDocument' of null" on setting .data() to appended element
- Conditionally append or remove sub-elements
- Hover over an element underneath another element
- d3.js - Force-Layout boundary issue V4
- D3 Treemap- recursive boxes not appearing
- How to find out about loaded d3.js extensions and their versions at runtime?
- D3.js animation
- Dash around single point in interpolated curve with d3.js
- How to have corresponding text appear/disappear in d3 chord diagram
- refreshing graph in d3js
- D3.js horizontal bar chart and data from json file
- D3 Bar Chart, bars not showing, axis on top
- Display only values from the data set into X axis ticks
- D3JS - Not able to align the word cloud in a page
- blank web page with d3.json(bardata.php) but works with d3.json(bardata.json)
- how can we add text to a svg circle in d3js
- Is there a way to reduce lagging of a guideline that follows the mouse pointer?
- D3 custom text label axis
- line d3.js graph shifting wrongly (to right)
- Add new row dynamically to an array with headers created from a csv file
- tooltip mouse tracking only works outside graphed data
- Get d3 v4 zoom and drag working together - simple example
- How to set period for vertical ticks?
- D3 zoom on reusable charts