Javascript 如何获取d3轴刻度以匹配我的数据？
这是我的密码：Javascript 如何获取d3轴刻度以匹配我的数据？,javascript,d3.js,scale,attr,rect,Javascript,D3.js,Scale,Attr,Rect,这是我的密码： <!doctype html> <html> <head> <title>D3</title> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> <script> var dataArray=[{"
<!doctype html>
<html>
<head>
<title>D3</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var dataArray=[{"letter":"a", "value":20},
{"letter":"b", "value":40},
{"letter":"c", "value":50},
{"letter":"m", "value":60}];
console.log(dataArray)
var width=500;
var height=500;
var widthScale=d3.scale.linear()
.domain([0, 60])
.range([0, width]);
var heightScale=d3.scale.ordinal()
.domain(dataArray.map(function(d){ return d.letter }))
.range([0,height-125]);
var letterScale=d3.scale.linear()
.domain([0,26])
.range(["A","B","c","d"])
var color=d3.scale.linear()
.domain([0,60])
.range(["red", "blue"]);
var x_axis=d3.svg.axis()
.orient("bottom")
.ticks(12)
.scale(widthScale);
var y_axis=d3.svg.axis()
.orient("left")
.ticks(4)
.tickFormat(function (d) {return d})
.scale(heightScale);
var canvas=d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(25, 0)");
var bars=canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("width", function(d) {return widthScale(d.value);})
.attr("height", 50)
.attr("fill", function(d) {return color(d.value)})
.attr("y", function(d, i) {return i*100});
// bars.append("text")
// .attr("x", function(d) {return widthScale(d)/2})
// .attr("y", function(d) {return -heightScale(d)})
// .style("stroke-width", 6)
// .style("text-anchor", "middle")
// .style("font-size", "34px")
// .style("fill", "black")
// .text(function(d) {return console.log(d);});
canvas.append("g")
.attr("transform", "translate(5, 375)")
.call(x_axis);
canvas.append("g")
.attr("transform", "translate(5,0)")
.call(y_axis)
</script>
</body>
</html>
D3
var dataArray=[{“字母”：“a”，“值”：20}，
{“字母”：“b”，“值”：40}，
{“字母”：“c”，“值”：50}，
{“字母”：“m”，“值”：60}]；
console.log（数据数组）
var宽度=500；
var高度=500；
var widthScale=d3.scale.linear（）
.domain（[0,60]）
.范围（[0，宽度]）；
var heightScale=d3.scale.ordinal（）
.domain（dataArray.map（函数（d）{return d.letter}））
.范围（[0，高度-125]）；
var letterScale=d3.scale.linear（）
.domain（[0,26]）
.范围（[“A”、“B”、“c”、“d”]）
var color=d3.scale.linear（）
.domain（[0,60]）
.范围（[“红色”、“蓝色”）；
var x_axis=d3.svg.axis（）
.orient（“底部”）
.滴答声（12）
.比例尺（宽度比例尺）；
var y_axis=d3.svg.axis（）
.东方（“左”）
.滴答声（4）
.tickFormat（函数（d）{return d}）
.刻度（高度刻度）；
var canvas=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“翻译（25,0）”）；
var bar=canvas.selectAll（“rect”）
.数据（数据阵列）
.输入（）
.append（“rect”）
.attr（“宽度”，函数（d）{返回宽度刻度（d.value）；}）
.attr（“高度”，50）
.attr（“填充”，函数（d）{返回颜色（d.value）}）
.attr（“y”，函数（d，i）{return i*100}）；
//条。追加（“文本”）
//.attr（“x”，函数（d）{return widthScale（d）/2}）
//.attr（“y”，函数（d）{return-heightScale（d）}）
//.样式（“笔划宽度”，6）
//.style（“文本锚定”、“中间”）
//.style（“字体大小”、“34px”）
//.样式（“填充”、“黑色”）
//.text（函数（d）{return console.log（d）；}）；
canvas.append（“g”）
.attr（“转换”、“翻译（5375）”）
.呼叫（x_轴）；
canvas.append（“g”）
.attr（“转换”、“翻译（5,0）”）
.呼叫（y_轴）
我不知道如何获得y轴刻度以匹配数据并与条形对齐？或者，正如您在注释掉的代码中看到的，我很难让文本出现。正确的文本（数字）将显示在开发工具的元素中，但不会显示在页面上。任何帮助都将不胜感激。这不是D3问题，而是关于统计和数据的问题。viz：你说“我不知道如何使y轴刻度与数据匹配”，但什么数据？没有 您的数据集只是一个由4个值组成的数组。如果要为每个值绘制一个水平条，x轴将显示一个定量变量（值：20、40、50、60）。但是y轴只显示不同的条：其分类的，而不是定量的。举例来说，你可以在这4个酒吧里吃橘子、苹果、香蕉和酸橙 因此，y轴必须是
heightScale=d3.scale.ordinal（）linearvar dataArray = [
{
"fruit": "orange",
"value": 20
},
{
"fruit": "apple",
"value": 40
},
{
"fruit": "banana",
"value": 50
},
{
"fruit": "lime",
"value": 60
}
]
heightScale.domain(dataArray.map(function(d){ return d.fruit }));
i*100.attr("y", function(d){ return heightScale(d) });
只需更改字母（a、b、c、d）的“结果”，您就可以得到您想要的。我已进行了上述更改，但y轴现在在页面上返回的长度非常长