score:1
Accepted answer
the texts will never show up because you're appending them to a <rect>
element.
however, you don't even need to append the texts as separate elements. since you already have a scale, simply use an axis generator:
var yaxis = d3.axisleft(heightscale);
var gx = svg.append("g")
.attr("transform", "translate(" + margin.left + "0,)")
.call(yaxis);
here is your code with the axis:
var csv = `vendor,units2016,share2016,units2015,share2015
samsung,"306,446.60",20.5,"320,219.70",22.5
apple,"216,064.00",14.4,225850.6,15.9
huawei,"132,824.90",8.9,"104,094.70",7.3
oppo,"85,299.50",5.7,"39,489.00",2.8
bbk communication,"72,408.60",4.8,"35,291.30",2.5
others,"682,313.30",45.6,"698,955.10",49.1`;
var fullw = 320;
var fullh = 240;
var margin = {
top: 1,
right: 25,
bottom: 25,
left: 120
}
var widthscale = d3.scalelinear()
.range([0, fullw]);
var heightscale = d3.scaleband()
.rangeround([0, fullh])
.paddinginner(0.2);
var svg = d3.select("body")
.append("svg")
.attr("width", fullw + margin.left + margin.right)
.attr("height", fullh + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
var data = d3.csvparse(csv);
var barcolor = d3.scalelinear()
.domain([0, d3.max(data, function(d) {
return +d.share2016;
})])
.range(["#e6f5ff", "blue"])
.interpolate(d3.interpolatehcl);
widthscale.domain([0, d3.max(data, function(d) {
return +d.share2016;
})]);
heightscale.domain(data.map(function(d) {
return d.vendor;
}));
var bars = svg.selectall("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", function(d) {
return heightscale(d.vendor);
})
.attr("width", function(d) {
return widthscale(+d.share2016);
})
.attr("height", heightscale.bandwidth())
.style("fill", function(d, i) {
return barcolor(i);
});
var yaxis = d3.axisleft(heightscale).ticksizeouter(0);
var gx = svg.append("g")
.attr("transform", "translate(" + margin.left + "0,)")
.call(yaxis);
<script src="//d3js.org/d3.v4.min.js"></script>
Source: stackoverflow.com
Related Query
- Text not showing on y-axis in horizontal bar chart d3.js
- Rotate x axis text on Horizontal bar chart
- Horizontal bar chart d3.js not showing label
- Hide all text on y axis dc.js bar chart
- Trouble using DC.js (crossfilter and d3 convenience library) - bar chart not showing values
- X axis not displaying on bar chart using d3.js
- D3 bar chart not showing first element in array
- D3.js bar chart - axis and labels not working / transitioning
- Text on horizontal bar chart - d3
- D3.js V5 - Why is my bar chart axis not scaling?
- Horizontal bar chart exit method not working
- axis text rotation inside group in d3 bar chart
- D3 bar chart bar text labels not visible properly
- horizontal lines along the y axis d3 bar chart
- d3.js axis labels not displaying in responsive bar chart
- NVD3 multi bar horizontal chart x axis domain
- D3 horizontal bar chart will not transition to new dataset
- Append text after bars on horizontal bar chart
- Vertical align long text in yAxis for horizontal bar chart
- d3.js - add text above bar chart not show
- dc.js - Chart not rendering (single row bar chart - horizontal row), with the exception of legend, axes and tick marks/values (which do render)
- Stacked bar chart not showing and no errors in console log either
- Why are the first two text labels of my bar chart not shown?
- Horizontal Stacked Bar Chart with Two Y Axis Issues
- Custom D3 `tickValue` on x axis -- horizontal bar chart
- d3 stacked bar chart values not showing up on chart
- Negative values not showing in grouped bar chart
- X axis label not displayed in bar chart with scroll and zoom feature - d3js, Brushing
- Horizontal bar chart y axis alignment
- D3 bar chart axis not scaling correctly
More Query from same tag
- Change x-axis Interval Display - dimple.js
- d3.js parallel coordinate with one different scale
- D3 bar chart where axis labels are hyperlinks from data
- Circles aren't updating in a multiline graph
- TypeError: d.ListingCreationDate.getUTCFullYear is not a constructor
- D3 v4 - make a horizontal bar chart with fixed width
- AngularJS Filter causing a $digest cycle errors
- Uncaught TypeError: d3.pack(...).sort is not a function
- d3.js 3D array interpolation
- Why is d3.select().style() not applied to <div>-elements?
- how to convert translate()[0] to d3 v4
- d3Js - how to arrange my values as around the 360d and automate data in a circle?
- How to dynamically update a d3.js force layout graph?
- Using D3 axis functionality on a canvas
- d3.js : re-inserting elements during dragstart/mousedown interferes with click events in Chrome and Safari but not Firefox
- Rollup returns undefined or array with value when using map
- What's the point of using an anonymous function for a one-liner?
- Pie chart as marker for MarkerClusterGroup
- D3.js get nearest X & Y coordinates for Area Chart
- D3 selection.join() using classes
- D3 choropleth state map data update on button click
- Using an associative array as data for D3
- Javascript tooltip cross browser incompatability
- D3 exit selecting wrong data
- Displaying circles using d3 from data
- transitionDuration function does not exist in nvd3.js
- D3 v4 change opacity for kontext related nodes
- d3.js: Passing data from parent node to child node onclick event
- Hex grid with d3.js
- Adding axis to the dynamic line chart in d3