score:1
Accepted answer
If the bars on your chart are 100 units wide, the maximum x value should be d3.max(points => d[0]) + 100
. If you plug that into your scale, you will find your chart now covers the correct range.
xScale = d3.scaleLinear()
.domain([
d3.min(points, d => d[0]),
d3.max(points, d => d[0]) + 100
])
.range([paddings.left, width - paddings.right]);
You will now find that you have made a mistake in calculating the width of the bars:
svg.selectAll(null)
.data(points)
.enter('')
.append('rect')
.attr('x', d => xScale(d[0]))
.attr('y', d => yScale(d[1]))
.attr('width', width / points.length)
.attr('height', d => height - yScale(d[1]) - paddings.bottom)
Can you work out why they are too wide?
Source: stackoverflow.com
Related Query
- How to increase the space between axis and axis label?
- How to proportionally increase the size of X axis which uses d3.scaleTime?
- How can I get the D3.js axis ticks and positions as an array?
- D3 grouped bar chart: How to rotate the text of x axis ticks?
- how to set the domain and scale on an axis on a nvd3.js multiBarChart
- How to display the value for the final tick on axis in D3?
- How to increase the length of a link in D3 force layout
- How to flip the Y axis on my D3 graph?
- How to format the Y axis values on Rickshaw Graphs
- How do I specify the number of axis tick marks in d3?
- How to make the NVD3 discreteBarChart labels on the X axis to adapt to the width or to the number of labels?
- D3: How to remove tick marks at the top and bottom of Y axis
- dimple.js How can I change the labels of a chart axis without changing the data?
- 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
- How to set the label for each vertical axis in a parallel coordinates visualization?
- How do i specify the axis range in React-Vis
- How to cut y axis to make the chart look better?
- How to remove the comma in D3 axis ticks and remove the last tick?
- D3.js how to get the position/offset of x and y axis
- how to make the x axis scrollable in a d3 line chart graph
- How to Increase the width of C3 pie chart Legend only. Not for the whole graph
- How do you find the distance while drawing line on mouse vertical axis or horizontal?
- How do I centre the Y axis in a D3 Tornado Chart
- How to change the color of a d3.js axis line
- How to get the same text of each elements in heat map as the y axis label?
- How to make axis "smart" and "flexible" so that the starting/end points on axis are sensible in D3 V4?
- How to sort bar charts synchronous with the ticks of x axis
- How to increase tick label width in d3.js axis
- How do I make D3 draw the axis from the start of a dataset?
- How to zoom only on the X axis in a line chart in d3.js (v7)
More Query from same tag
- d3 linkHorizontal for straight line curves
- Interactive d3 zip code choropleth - WA state
- Remove JS SCRIPT from MASTER page in child pages
- Constrain zoom and pan in d3
- How to avoid hardcoding of colors in D3
- How to draw bubbles on a D3 Map with mercator projection?
- D3 keep line width same when zooming
- D3 How to style keys using their nested values
- How to rotate an object around the center in d3.js
- Generating visually pleasing circle pack
- Customize chart points on c3.js
- d3-tip offset on svgs within Leaflet, Firefox only, not working
- Variable is undefined when angular script loads
- How to use NVD3 with rCharts in R with non numeric data
- D3.js - Append objects outside of the selection
- d3 tooltip | passing in a variable
- Reverse the direction of the color in linear gradient legend
- Creating Multiplie Pie Charts in a same page using d3 with JSON data
- Save High Resolution PNG with included Image in Chart Using d3.js on ObservableHQ.com
- prevent d3 donut chart from sorting automatically
- Rotate rect around axis in D3 graphs
- Add a div inside the text tag
- how to add text on line in D3?
- D3 Dot Matrix Chart
- setting the base for log scale in d3.js
- Rendering updated data in wrapped elements
- d3 using a different X scale and Y scale domain for each selection
- How to render object data in D3?
- D3JS Axis orientation changes on data refresh
- D3 V4 Basic example not working