如何定义静态x轴和y轴，javascript d3 [英] how to define a static xaxis and y axis, javascript d3
问题描述
x轴和y轴取决于数组中给出的值，每个值从值min开始，并在值max中停止。我们可以将分割更改为独立于用户值吗？
the x axis and the y axis depends on the values given in the array every one of them starts from the value min and stop in the value max. Can we change the segmentation to be independent from the user values?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.point {
fill: steelblue;
stroke: #000;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.js?2.9.6"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(data) {
// Coerce the strings to numbers.
data.forEach(function(d) {
d.x = +d.x;
d.y = +d.y;
});
// Compute the scales’ domains.
x.domain(d3.extent(data, function(d) { return d.x; })).nice();
y.domain(d3.extent(data, function(d) { return d.y; })).nice();
// Add the x-axis.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
// Add the y-axis.
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"));
// Add the points!
svg.selectAll(".point")
.data(data)
.enter().append("path")
.attr("class", "point")
.attr("d", d3.svg.symbol().type("triangle-up"))
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
});
</script>
档案：data.cvs
The file:data.cvs
x,y
5,90
25,30
45,50
65,55
85,25
推荐答案
我认为您的问题是否可以设置自定义范围或者您可以为每个轴设置自定义范围。
I'm think that your asking if you can set a custom range of ticks or if you can set a custom range for each axis. Well it's the same answer yes.
您可以使用 axis.tickValues（[自定义范围的值]）自定义刻度线。。
您可以在域调用中为轴设置自定义范围。您可以使用自定义范围[0,100]，例如 vida.io 以及< a href =http://jsbin.com/uvoFUmI/3/edit?js,output =nofollow> jsbin ，因此 .domain（[0,100]）。在jsbin中有几种其他方法可以自定义轴的注释掉的范围。只需打开它们并重新加载，看看他们做什么。不要忘记用右上角的js运行。
You can set a custom range for the axis in domain call. You can use a custom range [0,100] for instance such as posted above vida.io and also in the jsbin, so .domain([0,100]). In the jsbin there are a couple of other ways you can customise range of the axis that are commented out. Just turn them on and reload to see what they do. Don't forget to hit the run with js in the top right hand corner.
使用数据上的d3.extent返回指定的数组的最大值和最小值在评估员。
Using the d3.extent on the data returns the max and min of the array as specified in the assessor.
希望这能回答您的问题。
Hope this answers your question.
这篇关于如何定义静态x轴和y轴，javascript d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
