D3.js 自定义刻度值在d3条形图上消失
我的项目是测量离散间隔的信号功率水平，我试图用条形图来表示。由于频率是离散的，所以我尝试使用数组设置刻度值，当我提供[1,2]时，它们工作正常，但当我提供更大的值时，它们会表现得很奇怪 下面是代码，我现在只是尝试使用本地数据，因为我是D3新手D3.js 自定义刻度值在d3条形图上消失,d3.js,D3.js,我的项目是测量离散间隔的信号功率水平，我试图用条形图来表示。由于频率是离散的，所以我尝试使用数组设置刻度值，当我提供[1,2]时，它们工作正常，但当我提供更大的值时，它们会表现得很奇怪 下面是代码，我现在只是尝试使用本地数据，因为我是D3新手 <body> <script type="text/javascript"> //Width and height var w = 1000;
<body>
<script type="text/javascript">
//Width and height
var w = 1000;
var h = 500;
var barPadding = 1; // padding space to distinguish bars
var axisSpace = 25;
var dataset =[200,40];
var tix = [55,57]
// SCALES
var xscale = d3.scale.linear()
.domain([0, dataset.length])
.range([0,w]);
var yscale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d){return d;})])
.range([0,h]);
//AXES
var xAxis = d3.svg.axis()
.scale(xscale)// define simple axis function with scales
.orient("top") // define the orientation of labels
.tickValues(tix);
var yAxis = d3.svg.axis(yscale);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - yscale(d);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return (yscale(d) - axisSpace);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 550) + ")";
});
// call axis function on svg element
svg.append("g") // append new group to save all axes
.attr("class", "axis") // assign it a class so we can target it using CSS
.attr("transform", "translate(0, 477)") // 477 = h - axisSpace + 2
.call(xAxis); // call axis function
</script>
</body>
//宽度和高度
var w=1000；
var h=500；
var barPadding=1；//填充空格以区分条
向量空间=25；
var数据集=[200,40]；
var tix=[55,57]
//天平
var xscale=d3.scale.linear（）
.domain（[0，dataset.length]）
.范围（[0，w]）；
var yscale=d3.scale.linear（）
.domain（[0，d3.max（数据集，函数（d）{返回d；}）]）
.范围（[0，h]）；
//斧头
var xAxis=d3.svg.axis（）
.scale（xscale）//使用刻度定义简单轴函数
.orient（“top”）//定义标签的方向
.温度值（tix）；
var yAxis=d3.svg.axis（yscale）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回i*（带数据集长度）；
})
.attr（“y”，函数（d）{
返回h-yscale（d）；
})
.attr（“宽度”，w/dataset.length-条形填充）
.attr（“高度”，功能（d）{
返回（yscale（d）-轴空间）；
})
.attr（“填充”，功能（d）{
返回“rgb（0，0，+（d*550）+”）；
});
//在svg元素上调用axis函数
svg.append（“g”）//追加新组以保存所有轴
.attr（“class”、“axis”）//为其分配一个类，以便我们可以使用CSS将其作为目标
.attr（“transform”，“translate（0477）”）//477=h-axisSpace+2
.呼叫（xAxis）；//调用轴函数
.domain([0, dataset.length])
var tix = [55,57]
.domain(tix)