我有这张图表正在x轴上创建10个刻度值。我希望它有5个滴答声。我尝试了.ticks(5)方法，但是它不起作用。您能帮我弄清楚为什么它不起作用或如何实现吗？
这是正在运行的代码段：
$(document).ready(function(){
//Mobile or not?
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
//print in console wether I'm on mobile or desktop
(function(){
if(isMobileDevice()){
console.log("This device is a mobile");
}
else{
console.log("This device is a PC or laptop");
}
})();
function textSetter(){
if(isMobileDevice()){
if(window.innerHeight > window.innerWidth){
return textSize = 30
}
else{
return textSize = 15
}
}
else{
return ()=> window.innerWidth < 785 ? textSize = 11 : textSize = 20
}
}
//This will set the height depending on landscape or portrait//
function heightSetter(){
if(isMobileDevice()){
//landscape or not//
if(window.innerHeight > window.innerWidth){
return 40
}
else{
return 20
}
}
//But if not, then it check if browser is full expanded or not and set styles accordingly.
else{
return ()=> window.innerWidth < 785 ? "11px" : "20px"
}
}
var ticksDataArray = [
[
{country: "India", growth: 35},
{country: "Chile",growth: 30},
{country: "Spain",growth: 25},
{country: "US",growth: 20},
{country: "France",growth: 15},
]
];
function draw(chartDiv, ticksArray) {
var margin = {
top: 15,
right: 30,
bottom: 30,
left: 40
};
var width = $(chartDiv).width() - margin.left/2 - margin.right * 10;
var height = $(chartDiv).height() - margin.top - (margin.bottom*3.5);
var data = ticksArray;
function heightSetter(){
if(isMobileDevice()){
if(window.innerHeight > window.innerWidth){
return [margin.bottom, (height)]
}
else{
return [margin.bottom, (height*1.2)]
}
}
else{
return [margin.bottom, (height)]
}
}
var xScale = d3.scaleLinear()
.range([0, width + 50 ])
var yScale = d3.scaleBand()
.range(heightSetter()).padding(.38)
function svgGtranslater(){
if(window.innerHeight > window.innerWidth){
return heightJC = (margin.top) + (margin.bottom*2)
console.log("portrait mode")
}
else{
return heightJC = margin.top + margin.bottom *.5
console.log("landscape mode or desktop")
}
}
svgGtranslater();
var svg = d3.select(chartDiv)
.append("svg")
.attr("width", width + margin.left + margin.right * 10)
.attr("height", ()=> isMobileDevice ? height + margin.top + (margin.bottom*5) : height + margin.top + (margin.bottom*3.5))
.append("g")
.attr("transform", "translate(" + (margin.left * 4) + "," + heightJC + ")")
data.forEach(function(d) {
return d.growth = +d.growth;
});
yScale.domain(data.map(d => d.country))
xScale.domain([0, d3.max(data, d => d.growth)])
function yAxistranslater(){
if(isMobileDevice()){
if(window.innerHeight > window.innerWidth){
return heightTwo = height;
}
else{
return heightTwo = height*1.2;
}
}
else{
return heightTwo = height;
}
}
//GO translater :D!
yAxistranslater()
var xAxis = svg.append("g")
.style("font-size", textSetter())
.attr("class", "xAxis", "axis")
.attr("transform", "translate(" + 0 + "," + heightTwo + ")")
.call(d3.axisBottom(xScale).ticks(5)
.tickPadding(5).tickFormat(d => d + "%"))
var yAxis = svg.append("g")
.style("font-size", textSetter())
.attr("class", "yAxis", "axis")
.call(d3.axisLeft(yScale))
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("stroke", "transparent")
.attr("stroke-width", 4)
.attr("class", "bar")
.attr("height", yScale.bandwidth())
.attr("x", 0.5)
.attr("y", function(d) {
return yScale(d.country)
})
.attr("width", 0)
.transition()
.duration(3800)
.delay((d, i) => (i + 1) * 200)
.ease(d3.easeElastic)
.attr("width", function(d) {
return xScale(d.growth)
})
.style("fill", "#00338D")
.on('end', function() {
d3.select(this)
.on("mouseover", function() {
d3.select(this)
.transition()
.duration(600)
.attr("stroke", "#6D2077")
.attr("stroke-width", 3)
.style("fill", "#6D2077")
d3.selectAll(".textCircle")
.transition()
.duration(600)
.attr("r", yScale.bandwidth() / 1.9)
.attr("stroke", "#6D2077")
.attr("stroke-width", 1)
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(600)
.attr("stroke", "transparent")
.attr("stroke-width", 0)
.style("fill", "#00338D")
d3.selectAll(".textCircle")
.transition().duration(600)
.attr("r", yScale.bandwidth() / 2)
.attr("stroke", "transparent")
})
})
var newG4text = svg.append("g").attr("class","newG4text")
newG4text.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("x", d => xScale(d.growth))
.attr("y", d => yScale(d.country) + yScale.bandwidth()/2)
.attr("dx","-3em")
.attr("dy",".4em")
.style("font-size", textSetter())
.style("fill","#FFF")
.style("font-weight","bold")
.text(d=>d.growth + "%")
//main Title
svg.append("text")
.attr("x", (width / 2))
.attr("y", 10 )
.attr("dy", 10 )
.attr("text-anchor", "middle")
.attr("fill", "#00338D")
.style("font-size", textSize*1.5)
.text("Technology growth on the Current Year ");
}
draw("body",ticksDataArray[0]);
function redraw(){
draw("body",ticksDataArray[0]);
}
$(window).resize(function() {
$("body").empty();
redraw();
});
})html{
height: 98%;
margin: 0;
padding: 0;
}
body{
min-height: 98%;
margin: 0;
padding: 0;
}
svg{
text-rendering: geometricPrecision;
shape-rendering:geometricPrecision;
}<meta country="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--tether.min.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" />
<!--jquery.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--d3.min.js 4.13.0-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<!--bootstrap.min.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
<!--jquery.min.js again-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>