score:4
Accepted answer
The problem here is simple: you cannot append a text
element inside a rect
element.
The text
element will show up when you inspect the DOM, but this doesn't mean that it works, and no text will be actually painted in the SVG.
So, it should be:
g.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("dy", ".75em")
.attr("y", function(d) { return y(d.frequency); })
.attr("x", function(d) { return x(d.letter); })
.attr("text-anchor", "middle")
.text(function(d) { return d.frequency; });
Note that I changed
.text(function(d) { return y(d.frequency); });
which makes no sense, to:
.text(function(d) { return d.frequency; });
Here is a demo with your code:
var data = [{
"letter": "A",
"frequency": "5.01"
}, {
"letter": "B",
"frequency": "7.80"
}, {
"letter": "C",
"frequency": "15.35"
}, {
"letter": "D",
"frequency": "22.70"
}, {
"letter": "E",
"frequency": "34.25"
}, {
"letter": "F",
"frequency": "10.21"
}, {
"letter": "G",
"frequency": "7.68"
}, ];
//Setting up of our svg with proper calculations
var svg = d3.select("body")
.append("svg").attr("width", 500).attr("height", 300);
var margin = {
top: 40,
right: 20,
bottom: 40,
left: 40
};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
//Plotting our base area in svg in which chart will be shown
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//X and Y scaling
var x = d3.scaleBand().rangeRound([0, width]).padding(0.4);
var y = d3.scaleLinear().rangeRound([height, 0]);
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
return +d.frequency;
})]);
//Final Plotting
//for x axis
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", "translate(0," + height + ")");
//for y axis
g.append("g")
.call(d3.axisLeft(y))
.append("text").attr("transform", "rotate(-90)").attr("text-anchor", "end");
//for rectangles
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter);
})
.attr("y", function(d) {
return y(d.frequency);
})
.attr("width", x.bandwidth())
.attr("height", function(d) {
return height - y(d.frequency);
});
g.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("dy", ".75em")
.attr("y", function(d) {
return y(d.frequency) - 16;
})
.attr("x", function(d) {
return x(d.letter) + x.bandwidth() / 2;
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.frequency;
});
<script src="https://d3js.org/d3.v4.min.js"></script>
score:1
The text element should not be inside the rect element. Just append them to your g element instead.
Source: stackoverflow.com
Related Query
- D3 - Getting text on the top of rectangles in Vertical Bar chart
- Text on top of d3 vertical stacked bar chart
- D3.js Draw vertical line after every 2 bar and draw x-axis label on the top of bar chart
- Sorting the bars and getting the group data in a grouped bar chart
- Vertical align long text in yAxis for horizontal bar chart
- How can I get the d3.js bar chart start from 0 instead of from the top
- Why are the first two text labels of my bar chart not shown?
- d3 bar chart labels not getting updated on updating the chart with the new data
- How can i set the tick text of x-axis between bar in a bar chart in c3.js or d3.js?
- Text inside Bar of the Grouped Bar Chart D3.js
- How to display total count on top of the stacked bar chart
- Changing the orientation of the Stacked bar Chart from Vertical to Horizontal in D3
- Add text on top of bar in d3js chart -- no <text> elements added
- How to place text inside each bar of the chart using d3
- How to make bar chart with additional vertical lines below the x axis
- How to write vertical text from bottom to top without using transform rotate?
- Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart
- D3js - change Vertical bar chart to Horizontal bar chart
- D3 grouped bar chart: How to rotate the text of x axis ticks?
- Make simple bar chart using C3 with separate columns on the x axis
- Draw a vertical line representing the current date in d3 gantt chart
- D3 update dataset on click and redraw the bar chart
- Hide all text on y axis dc.js bar chart
- Text On each bar of a stacked bar chart d3.js
- Bar chart show values on top
- D3 bar chart needs to add arrow and text in particular bar
- Unneeded white space before the 1st bar in D3 bar chart
- d3 vertical bar chart
- Sorting the bars in a bar chart with dc.js
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
More Query from same tag
- Is it possible to import svg shapes in d3.js?
- Custom legend based on color of bars in a dc.js composite chart
- transition of x-axis results in overflow
- d3 trying to open html in div or iframe on click
- d3 pattern to add an element if missing
- How to show transition in d3 on one path after another?
- Update second chart on mouseover
- add sparkline to d3.js table generated from nested JSON data
- How to add different shape marker in d3?
- How to define custom time interval in d3.js
- javascript es6 import symbols into a namespace
- How to create the circumference simultaneously by defining the radius in SVG?
- using d3 drag behavior's origin to create a "drag handle" for a tree node
- Show a D3 SVG Within a Tooltip
- How to style d3.js selection as individual elements?
- IE8 Support for D3 using Aight
- Drag to rotate an SVG:g group
- D3: How to detect the end of the .each()
- filter data from csv using array filter not working as expected
- How to set the exact size of an inline SVG element?
- dynamically naming the axis in scatterplot d3.js
- Accessing nested data for graph creation
- D3 selection and entry
- D3 Topojson Circle with Radius Scaled in Miles
- d3.js Animation Follow Circles on Mouse Move
- Given two arbitrary interpolated curves, color them based on relative values
- Add html content with line break inside d3 circle
- Parsing a dataset of time in the format "Y-M-D H:M:S.MS" gives me 0NaN-NaN-NaNTNaN:NaN:NaN.NaNZ
- D3. Histogram Layout. How do I recalculate the histogram on the fly?
- Setting svg fill attribute in Javascript