D3.js d3js:无法在轴内水平放置钢筋_D3.js

D3.js d3js:无法在轴内水平放置钢筋

d3.js

D3.js d3js:无法在轴内水平放置钢筋,d3.js,D3.js,我正在学习从头开始在d3中制作图表，而无需使用其他人的代码并对其进行修改。我可以成功创建x&y轴垂直条形图。但当要把同一张图表转换成水平条形图时，我就陷入了混乱。以下是我目前的代码： var data = [{ name: "China", value: 1330141295 }, { name: "India", value: 1173108018 }, { name: "Indonesia", value: 242968342 }, { name: "Russia

我正在学习从头开始在d3中制作图表，而无需使用其他人的代码并对其进行修改。我可以成功创建x&y轴垂直条形图。但当要把同一张图表转换成水平条形图时，我就陷入了混乱。以下是我目前的代码：

var data = [{
  name: "China",
  value: 1330141295
}, {
  name: "India",
  value: 1173108018
}, {
  name: "Indonesia",
  value: 242968342
}, {
  name: "Russia",
  value: 139390205
}];
//set margins
var margin = {
  top: 30,
  right: 30,
  bottom: 30,
  left: 40
};
var width = 960 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
//set scales & ranges
var yScale = d3.scaleBand().range([0, height]).padding(0.1)
var xScale = d3.scaleLinear().range([0, width])
//draw the svg
var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom).append("g")
  .attr("transform", "translate(" + margin.left * 2 + "," + margin.top + ")")
//load the data
data.forEach(function(d) {
  d.population = +d.population;
});

//set domains

xScale.domain([0, d3.max(data, function(d) {
  return d.population
})])

yScale.domain(data.map(d => d.name))

//add x & y Axis

svg.append("g")
  .attr("transform", "translate(" + 0 + "," + height + ")")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale))
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", d => yScale(d.name))
  .attr("height", d => yScale(d.name))
  .attr("x", d => width - xScale(d.population))
  .attr("width", yScale.bandwidth())

非常感谢。

您需要更改代码中的许多内容

TL；博士

将数组中的
```
value
```
更改为
```
population
```
比例用于将值转换为比例像素值
```
height
```
是元素的垂直大小。您应该使用
```
yScale（d.name）
```
```
width
```
是元素的水平大小。您应该使用
```
xScale（d.population）
```
```
y
```
是元素的垂直位置。您应该使用
```
yScale.bandwidth（）
```
```
x
```
是元素的垂直位置。您应该使用
```
0
```
在新添加的
```
g
```
或
```
svg
```
元素上使用
```
selectAll（“rect”）
```
，该元素与具有轴的
```
g
```
元素不同
添加
```
fill
```
属性，使矩形具有颜色

您将填充字段标记为

value

，但您正在调用

population

，通过代码来使用它。因此，将数据对象中的值替换为填充

接下来，您需要更改设置RECT的方式。在

svg

元素上直接使用selectAll，或在

svg

元素上附加另一个

，并在该元素上添加矩形。现在，您的代码尝试将矩形添加到与x轴相同的

元素中

确保正确设置了矩形的属性。高度是rect元素的大小（以像素为单位），而不是位置<代码>y是矩形从上到下的垂直位置。这意味着

height

属性应该使用

yScale（d.name）

和

width

应该使用

xScale（d.population）

，因为它们是矩形或

rect

元素的宽度和长度

和

是元素在

svg

元素左上角的坐标位置。使用它们来确定矩形左上角像素的起始位置。你应该有

yScale.bandwidth（）

和

一旦我添加了一个答案，我就违反了你的“我不想使用别人的代码”您好，我不想让你重新编写/修改我发布的代码，我只想用英语而不是代码语言进行解释。我的问题只是为了学习。问候。以下是你做错的几件事：1。数据中没有

总体

（它是

值

）2。您正在将条形图附加到x轴（）。3.当你建立一个水平条形图时，高度不应该等于带宽吗？4.要从y轴开始条形图，请尝试将

更改为0。5.当您进行上述更改时，您认为宽度应该是多少？是的，它将被映射为0作为

xScale（俄罗斯人口）==0

。为什么不将域设置为

[0，d3.max（data，d=>d.value）]

，正如您在这里的问题中所做的那样？这将意味着一个合理的宽度到 Rect s（除非值将是感谢你@ Shankes！它工作得很完美，最好的标准是，谢谢你，我理解了它背后的逻辑。谢谢（Y）