D3 我如何从 0 以外的地方开始我的 y 轴
R.M*_*itt 5 javascript css axis-labels d3.js
我有一个像这样的双轴图
2 Y 轴未按最佳比例缩放 理想情况下 - 右手 YI 希望从 1.5 开始并在 0.1 处的 4 个刻度处结束 -左手 YI 想从 50 处开始并在 1 处结束 60 个刻度
如何做到这一点，这是我的代码和数据：
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Self Identification Percentages</title>
<style>
.dataDisplay {
font-size:1em;
}
body { font: 12px Arial;}
path {
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<script src="./jquery.min.js" type="text/javascript"></script>
<script src="./jquery-ui.min.js" type="text/javascript"></script>
<script src="./jquery.corner.js"></script>
</head>
<body>
<script src="./d3/d3.v3.min.js"></script>
<div id="graph"></div>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 0, right: 20, bottom: 20, left: 50},
width = 350 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 1]);
var yr = d3.scale.linear().range([height, 1]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);
var yAxisRight = d3.svg.axis().scale(y).orient("right").ticks(10);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.pctgDiff); });
// Adds the svg canvas
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 + ")");
// Get the data
var dataFile = "abo.csv";
d3.csv(dataFile, function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.pctgDiff = d.pctgDiff;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.pctgDiff; })]);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data))
.attr("stroke", "#7CA2C8");
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
//svg.append("g")
// .attr("class", "y axis")
// .call(yAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style("font-size", "12px")
.style("font-weight", "900")
.style("font", "sans-serif")
.text("All Other Change");
});
dataFile = "dis.csv";
d3.csv(dataFile, function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.pctgDiff = d.pctgDiff;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.pctgDiff; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data))
.attr("stroke", "#ECAD6F");
});
dataFile = "min.csv";
d3.csv(dataFile, function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.pctgDiff = d.pctgDiff;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.pctgDiff; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data))
.attr("stroke", "#C3D1DC");
});
dataFile = "fem.csv";
d3.csv(dataFile, function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.pctgDiff = d.pctgDiff;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.pctgDiff; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data))
.attr("stroke", "#7CC8A2");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "#7CC8A2")
.call(yAxisRight);
svg.append("g")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 310)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style("font-size", "12px")
.style("font-weight", "900")
.style("font", "sans-serif")
.style("fill", "#7CC8A2")
.text("Female Change");
});
</script>
</body>
</html>
我试过摆弄
var y = d3.scale.linear().range([height, 1]); var yr = d3.scale.linear().range([height, 1]);
例如，将 0 更改为 1 但它仍然从双方的原点开始
这也是我的数据：
abo.csv：
date,pctgDiff
2014-03-31,1.850000
2015-03-31,2.400000
2016-03-31,2.700000
2016-11-10,3.280000
.csv：
date,pctgDiff
2014-03-31,1.020000
2015-03-31,1.040000
2016-03-31,1.170000
2016-11-10,1.320000
最小.csv
date,pctgDiff
2014-03-31,5.010000
2015-03-31,6.100000
2016-03-31,6.370000
2016-11-10,6.070000
fem.csv
date,pctgDiff
2014-03-31,53.540000
2015-03-31,53.940000
2016-03-31,54.510000
2016-11-10,54.830000
Y 轴构建方法使用起始值和结束值数组。domain您的情况下的方法将 0 作为起点。
y.domain([0, d3.max(data, function(d) { return d.pctgDiff; })]);
您可以使用自定义值而不是 0，或者仅使用
d3.extent(array[, accessor])辅助方法来获取[minimum, maximum]当前数据的数组。
d3.extent(数组[, 访问器])
使用自然顺序返回给定数组中的最小值和最大值。如果数组为空，则返回[未定义，未定义]。可以指定一个可选的访问器函数，这相当于在计算范围之前调用 array.map(accessor)。
例子：
y.domain(d3.extent(data, function(d) { return d.pctgDiff; }));
| 归档时间： |
|
| 查看次数： |
5045 次 |
| 最近记录： |