我在使用 D3 的 min 和 max 函数时遇到问题，当我将它们用于我的域时，它们似乎工作有问题，最大值仅取低于最大值的值，同样的情况发生在最小值上。或者至少看起来是这样，因为我的图表缺乏上级和下级最大值。现在我手动修补它(只是通过间隔)，但下周我将使用数百个数据集，所以我需要自动正确地完成它，提前感谢，这是我失败的轴代码:
编辑:它的工作原理非常错误，有些集合有效，其他集合无效，而在其他集合中，我不知道为什么，加上范围故障，它反转了 Y 轴。我很确定我的错误是在 de yRange 微积分上，但我不知 Prop 体在哪里。
<!DOCTYPE html>
<meta charset="utf-8">
<title>Causa básica</title>
<style>
.axis path, .axis line
{
fill: none;
stroke: #777;
shape-rendering: crispEdges;
}
.axis text
{
font-family: 'Arial';
font-size: 13px;
}
.tick
{
stroke-dasharray: 1, 2;
}
.bar
{
fill: FireBrick;
}
</style>
<svg id="visualisation" width="1000" height="500"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
InitChart();
function InitChart() {
var lineData;
d3.tsv("data.tsv", function(data) {
seeData(data);
//d3.tsv("data2.tsv", function(data) {
//seeData(data);
});
function seeData(lineData) {
var vis = d3.select("#visualisation"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2008,
//d3.min(lineData, function (d) {
//return d.x;
//}),
d3.max(lineData, function (d) {
return d.x;
})
]),
// yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0.079,0.13]), this works, but is manual
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function (d) {
return d.y;
}),
d3.max(lineData, function (d) {
return d.y;
})
]),
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
vis.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineFunc = d3.svg.line()
.x(function (d) {
return xRange(d.x);
})
.y(function (d) {
return yRange(d.y);
})
.interpolate('linear');
vis.append("svg:path")
.attr("d", lineFunc(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 3)
.attr("fill", "none")
//acabar
.on('click', function(d) {
d3.select(this)
if(d3.select(this).attr("stroke")!= "red"){ d3.select(this) .attr("stroke", "red")}
else {d3.select(this) .attr("stroke", "blue")
d3.select(this) .attr("stroke-width", 3);}
})
.on('mouseover', function(d) {
d3.select(this)
.attr("stroke", "green")
.attr("stroke-width", 9);
})
.on('mouseout', function(d) {
d3.select(this)
.attr("stroke", "blue")
.attr("stroke-width", 3);
});
}
}
</script>
最佳答案
问题是您正在从 TSV 文件中读取字符串，而不是将它们转换为数字。这意味着“10”将小于“9”(因为“1”位于“9”之前)。要修复此问题，只需使用 + 将字符串转换为数字，特别是使用 +d.y 而不是 d.y。
关于javascript - 使用 d3.min 的 D3 的域问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28276226/