gpt4 book ai didi

javascript - 如何使用 d3.js 在 X 轴上添加间隔?

转载 作者:行者123 更新时间:2023-12-03 02:50:31 27 4
gpt4 key购买 nike

我想要得到 10 的间隔,从 0 开始一直到 50。但是我得到的间隔是 5。

这是代码

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
</head>
<body>
<script>
var xAxis = d3.svg.axis();
var axisScale = d3.scale.linear()
.domain([0,100])
.range([0,100]);
var xAxis = d3.svg.axis()
.scale(axisScale);
typeof(xAxis);
var svgContainer = d3.select("body").append("svg")
.attr("width", 700)
.attr("height", 100);

//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
.domain([0, 50])
.range([0, 400]);
//Create the Axis
var xAxis = d3.svg.axis()
.scale(axisScale);
//Create a group Element for the Axis elements and call the xAxis function
var xAxisGroup = svgContainer.append("g")
.call(xAxis);
</script>
</body>

任何形式的帮助将不胜感激。谢谢。

最佳答案

指定 D3 轴中的值的最安全方法是使用 axis.tickValues。对于您的情况:

.tickValues(d3.range(axisScale.domain()[0], axisScale.domain()[1] + 10, 10));

这是经过更改的代码:

var svgContainer = d3.select("body").append("svg")
.attr("width", 700)
.attr("height", 100);

var axisScale = d3.scale.linear()
.domain([0, 50])
.range([0, 400]);
var xAxis = d3.svg.axis()
.scale(axisScale)
.tickValues(d3.range(axisScale.domain()[0], axisScale.domain()[1] + 10, 10));

var xAxisGroup = svgContainer.append("g")
.attr("transform", "translate(20,50)")
.call(xAxis);
path,
line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>

关于javascript - 如何使用 d3.js 在 X 轴上添加间隔?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47887319/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com