score:1
Accepted answer
i have done a few adjustments to the positional attributes of g
elements containing bar rect
elements and dx
and dy
attributes of text elements.
hope this working code snippet helps.
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeroundbands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
.append("svg") //append svg element inside #chart
.attr("width", width + margin.left + margin.right) //set width
.attr("height", height + margin.top + margin.bottom); //set height
var xaxis = d3.svg.axis()
.scale(x)
.orient("bottom"); //orient bottom because x-axis will appear below the bars
var yaxis = d3.svg.axis()
.scale(y)
.orient("left");
var data = [{
"name": "bill",
"val": 28
}, {
"name": "kevin",
"val": 46
}, {
"name": "ryan",
"val": 23
}, {
"name": "ville",
"val": 56
}];
x.domain(data.map(function(d) {
return d.name
}));
y.domain([0, d3.max(data, function(d) {
return d.val
})]);
var barwidth = math.min.apply(null, [x.rangeband() - 2, 100]);
var bar = chart.selectall("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(" + x(d.name) + ", " + y(d.val) + ")";
});
bar.append("rect")
.attr("y", 0)
.attr("x", barwidth - 10)
.attr("height", function(d) {
return height - y(d.val);
})
.attr("width", barwidth);
bar.append("text")
.attr("x", barwidth - 10)
.attr("y", 0)
.attr("dx", barwidth / 2)
.attr("dy", ".75em")
.text(function(d) {
return d.val;
});
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.left + "," + height + ")")
.call(xaxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yaxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("frequency");
function type(d) {
d.name = +d.name; // coerce to number
return d;
}
#chart rect {
fill: #4aaeea;
}
#chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #fff;
shape-rendering: crispedges;
}
body {
background: #1a1a1a;
color: #eaeaea;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart" </div>
Source: stackoverflow.com
Related Query
- D3.JS bar graph column offset while adding new data
- d3.js bar chart new data adding onto bars,
- How to update d3.js bar chart with new data
- transition when adding new data to d3 streamgraph
- d3js graph retaining old axis data on refreshing with new data
- Missing first value while creating a bar graph
- Dynamic data with constant bar width in d3.js bar graph
- d3 adding html links to a column of data in a table
- Adding background color in d3 js bar chart using data values
- Single Stacked Bar Graph Data Setup?
- c3 JS scroll bar jumping when loading new data
- D3 force-directed graph adding new nodes causes x & y to be NaN
- Adding a new path when the updated data has additional sections
- Adding tooltips to line graph data points AFTER lines animate
- d3 v4 how to add data labels to bar graph
- D3JS refreshing graph for new Data
- d3.js - How to do data mapping and filter for Stacked Bar graph
- D3.js: Adding a time axis to a bar graph with negative values
- Update d3 graph with new data
- d3.js not updating graph with new data
- Redraw d3 graph with a new data
- d3 bar chart labels not getting updated on updating the chart with the new data
- changing height of bar charts from new data
- Always 10 bars on a bar graph even if data runs out at a number indivisible by 10?
- Adding multiple sets of data to C3 graph stops either from showing up
- d3.js tool tip on a force directed graph not displaying complete data while hovering over links
- JavaScript D3 bar chart data will not update when new source is selected from drop down filter
- d3: drawing elements correctly but not adding new data to the dom
- Updating d3 bar chart labels with new data of variable length
- (d3.js)(.csv) Exclude column from Stacked Bar Graph
More Query from same tag
- d3js bars not updating properly
- D3 examples from bl.ocks.org full of errors, can version be the reason?
- How to call stopPropagation in Typescript
- Create graphs similar to Pew Research site
- d3.layout.treemap().children() in d3 version 5
- Can I use vue.js to keep track of changes in d3.js scales
- NVD3/D3 change y axis minimum value
- Unneeded white space before the 1st bar in D3 Stack chart
- Broken D3js Chord Diagram
- how to show ordinal axis in d3
- Touch handling completely broken on Chrome version 70
- after making bar chart inside SVG using D3 , it is not fitting the entire SVG
- Show values on Y Axis as it is with Higher and lower limits NVD3 Line Chart
- Data binding in D3 fails when using "cloned" data
- How to center text in a rect element in d3?
- Tooltips for nested circles in D3 circle pack layout
- d3 choropleth: changing data without reloading map
- Firefox doesn't render SVG properly, other browsers do
- d3 example does not work on a html page
- dc.js d3.js ElasticX with date values not rendering correctly when filtered
- d3.brush is selecting surrounding divs with radial chart; only occurs d3 3.3+
- How to send dynamic data to c3chart angular line chart
- cursor freeze elements when added zoom on D3 map
- updating values using d3
- Data refresh issue with D3 burnup chart
- D3 - Nesting multiple charts from the same dataset
- D3.js create an outline to the clipath shape
- D3.js substitute text in a paragraph
- Invalid value for <circle> attribute cx=“NaN” using D3.js
- Best way to fit variably-sized text into a semi-circle in d3.js?