score:2

*Accepted answer*

The problem is that, despite its name, your linear `xScale`

is not linear (the image of 0 is 100). So when you use `return xScale(d.y);`

for the width, you're adding 100 to the width of every rectangles (in mathematical terms, the function used is xScale(z) = 0.00211 * z + 100 : this is affine, not linear).

Edit, examples :

- a rect starting at d.y0=0 must have x=100
- a rect with d.y=0 must have width=0
- a rect with d.y0=71000 (around half the sum) must have x=250 (middle of the drawing)
- a rect with d.y=71000 must have width=150 (half the width of the drawing)

=> It is not possible to use directly the same scale for width and x position. So either you use different functions to compute width and x, or you cheat with an additional `transform`

for x (see my original solution below).

The easiest solution is to have a `range`

of `[0,300]`

(instead of `[100,400]`

), and put the drawing area within a `g`

with `.attr("transform", "translate(100,0)")`

to center the plot.

Second option (sounds like the one you'd prefer): use `xScale(d.y0+d.y) - xScale(d.y0)`

for the width (instead of just `xScale(d.y)`

). This directly computes the distance between left and right endpoints, i.e. it gives the width. It should work with any scale (not necessarily linear).

As for your second question, I don't really know another general way of doing this (other than writing your own drawing procedure, it won't be too hard). But you can easily translate a simple array into a layout-friendly one:

```
var dataset = [66852, 7550]
var layoutDataset = dataset.map(function(d){ return [{y:d}] });
```

Source: stackoverflow.com

#### Related Query

- D3 - Shrink Linear Scale Range
- Linear scale not using range specified in d3
- d3 color scale - linear with multiple colors?
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- Use d3 log scale instead of linear scale
- How do we change the tick values generated by a linear scale in a d3.js line plot?
- d3 simple linear chart with jquery ui range slider
- D3 ordinal scale only returning extremes. Why isn't it interpolating between range and domain?
- Best d3 scale for mapping integers range
- d3.js linear scale returns NaN
- render d3 linear nice scale with whole numbers only
- custom d3 linear scale that returns null for null values instead of 0
- D3.js using ordinal scale over linear scale
- d3.js - logarithmic scale with minus and zero in range
- D3.js v5 - Creating a relative, zoomable timeline-like axis on a linear scale
- Starting linear scale from 1 instead of 0 (D3.js)
- Crosshair / x value tooltip for linear scale
- Change D3 scale from linear to pow by pushing a button
- d3.js fit scale to rgb() range of blue
- Disable brush on range chart before selecting a scale from the dropdown/on page load(dc.js,d3.js)
- d3 time scale add before and after time range a percentage of time interval
- Format linear scale large number replace G to B
- Linear piecewise scale in D3
- D3 linear scale , how to show customised strings as ticks ?
- Creating a d3.js linear scale with multiple domains?
- How to scale an integer to date with range and domain
- D3: Giving a linear scale a dynamic domain
- Tick line not visible in linear time scale
- How can I set a minimum range for an interval for a time scale in d3.js?
- D3 SVG path is not filling with linear scale gradient

#### More Query from same tag

- How to add images to c3.js generated charts
- D3v6 drag event callback function fire with undefined parameters
- Get D3.js sums before next key
- D3.JS- Format tick values with an ordinal scale axis
- Understanding how D3.js binds data to nodes
- DC JS : How to highlight rows in an aggregated data table on click, similar to a row chart?
- Get offset position of an axis tick
- D3 Ordinal Scale: Map multiple domain values to same range
- angular nvd3 duration not affect pie chart
- d3 find first entry of data category
- Setting pie chart colors using d3.js
- D3 update line graph
- How can i get the id of a polygon in an SVG file?
- use of "d" in function literal in D3?
- Updating and Transitioning Data on graph using D3 and Socket
- D3 force layout hover on arrow
- Error prerendering server of a pie chart with D3.js in svg format
- How to access parent data inside a nested data in d3.js?
- Enter, update and exit selections in a treemap
- On mouseover cursor changes to button form
- Merging the `enter` selectin into the `update` selections
- How to remove double grid lines and force y to the origin
- Apply updated data to line/path?
- d3 zoom not working as in example
- Failed to generating two pie charts on the same page in d3.js
- d3.js tree - How to set Y depth of a specific level?
- d3js dynamic csv switch from dropdown list
- D3-Chord: Flowing circle elements on chord-path mouseover
- d3.js opening a new tab by dbclick event
- Personalized axis range