D3版本4轴
D3版本4轴
提问于 2017-01-03 15:32:19
有人知道为什么我看不到我的线图的轴线吗？
这是到图表的链接：https://d3responsive.firebaseapp.com/responsive.html
这是JavaScript代码：
/* D3-v4 curve interpolation comparison: https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529 */
var dataline1 = [
{"mes":1, "impuestoPorcentaje":20},
{"mes":2, "impuestoPorcentaje":14},
{"mes":3, "impuestoPorcentaje":20},
{"mes":4, "impuestoPorcentaje":21},
{"mes":5, "impuestoPorcentaje":15},
{"mes":6, "impuestoPorcentaje":22},
{"mes":7, "impuestoPorcentaje":9},
{"mes":8, "impuestoPorcentaje":6},
{"mes":9, "impuestoPorcentaje":23},
{"mes":10, "impuestoPorcentaje":7},
{"mes":11, "impuestoPorcentaje": 40},
{"mes":12, "impuestoPorcentaje": 45}
];
var dataline2 = [
{"mes":1, "impuestoPorcentaje":14},
{"mes":2, "impuestoPorcentaje":19},
{"mes":3, "impuestoPorcentaje":24},
{"mes":4, "impuestoPorcentaje":24},
{"mes":5, "impuestoPorcentaje":24},
{"mes":6, "impuestoPorcentaje":27},
{"mes":7, "impuestoPorcentaje":32},
{"mes":8, "impuestoPorcentaje":38},
{"mes":9, "impuestoPorcentaje":11},
{"mes":10, "impuestoPorcentaje":25},
{"mes":11, "impuestoPorcentaje": 40},
{"mes":12, "impuestoPorcentaje": 45}
];
var wl = 550;
var hl = 450;
var svgl = d3.select("body").append("svg")
.attrs({
width: wl,
height: hl
});
// Domain and ranges
var xscalel1 = d3.scaleLinear()
.domain([0, d3.max(dataline1, function(d) {
return d.mes;
})])
.range([0, wl - 30]);
var yscalel1 = d3.scaleLinear()
.domain([0, d3.max(dataline1, function(d) {
return d.impuestoPorcentaje;
})])
.range([hl - 30, 15]);
var xscalel2 = d3.scaleLinear()
.domain([0, d3.max(dataline2, function(d) {
return d.mes;
})])
.range([0, wl - 30]);
var yscalel2 = d3.scaleLinear()
.domain([0, d3.max(dataline2, function(d) {
return d.impuestoPorcentaje;
})])
.range([hl - 30, 15]);
// Lines
var lineOne = d3.line()
.x(function(d) {
return xscalel1(d.mes);
})
.y(function(d) {
return yscalel1(d.impuestoPorcentaje);
})
.curve(d3.curveLinear);
var lineTwo = d3.line()
.x(function(d) {
return xscalel2(d.mes);
})
.y(function(d) {
return yscalel2(d.impuestoPorcentaje);
})
.curve(d3.curveMonotoneX);
var vis = svgl.append("path")
.attrs({
d: lineOne(dataline1),
"stroke": "#008080",
"stroke-width": 2,
"fill": "none"
});
var vis2 = svgl.append("path")
.attrs({
d: lineTwo(dataline2),
"stroke": "orange",
"stroke-width": 2,
"fill": "none"
});
// Add the x Axis
svgl.append("g")
.attr("transform", "translate(0," + hl + ")")
.call(d3.axisBottom(xscalel1));
// Add the y Axis
svgl.append("g")
.call(d3.axisLeft(yscalel1));回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-03 15:42:26
你一直在把轴平移到SVG的高度。你得留点余地。
例如，这是您现在的代码(我正在简化您的域)：
var wl = 550;
var hl = 150;
var svgl = d3.select("body").append("svg")
.attr("width", wl)
.attr("height", hl);
var xscalel1 = d3.scaleLinear()
.domain([0, 100])
.range([0, wl-30]);
svgl.append("g")
.attr("transform", "translate(0," + hl + ")")
.call( d3.axisBottom(xscalel1) );<script src="https://d3js.org/d3.v4.min.js"></script>
单击“运行代码片段”(仅为空白)后，什么都不会显示。你什么也看不见，因为这个：
.attr("transform", "translate(0," + hl + ")")正在将轴移动到SVG的高度(hl)，也就是它的末尾。
现在，让我们看看相同的代码，其中有一些空白，如下所示：
.attr("transform", "translate(0," + (hl - 20) + ")")这样，我们将轴移动到SVG结束(高度)之前的20个像素。
这就是结果，现在你可以看到这个轴：
var wl = 550;
var hl = 150;
var svgl = d3.select("body").append("svg")
.attr("width", wl)
.attr("height", hl);
var xscalel1 = d3.scaleLinear()
.domain([0, 100])
.range([0, wl-30]);
svgl.append("g")
.attr("transform", "translate(0," + (hl - 20) + ")")
.call( d3.axisBottom(xscalel1) );<script src="https://d3js.org/d3.v4.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41446939
复制相关文章
相似问题
腾讯云开发者
