Javascript d3.js无法正确缩放，在我的轴上显示的内容有一个限制
我正在尝试创建一个滑块，当您从左向右滑动条时，它会显示数据。当我从右向左滑动时，我的数据不会显示。第二，x轴的最大刻度是9。我已经对我的数据进行了处理，如果我将8作为x轴的最高值，那么8将是最高值。但由于某些原因，我不能超过9。即使我所有的数字都在9以下，也不是所有的数据都会显示出来 在我的数据中，我有两列。一个称为“ep”（用于x轴），另一个称为“char”（用于y轴） 关于如何正确缩放x轴并显示数据，有什么想法吗Javascript d3.js无法正确缩放，在我的轴上显示的内容有一个限制,javascript,d3.js,scale,Javascript,D3.js,Scale,我正在尝试创建一个滑块，当您从左向右滑动条时，它会显示数据。当我从右向左滑动时，我的数据不会显示。第二，x轴的最大刻度是9。我已经对我的数据进行了处理，如果我将8作为x轴的最高值，那么8将是最高值。但由于某些原因，我不能超过9。即使我所有的数字都在9以下，也不是所有的数据都会显示出来 在我的数据中，我有两列。一个称为“ep”（用于x轴），另一个称为“char”（用于y轴） 关于如何正确缩放x轴并显示数据，有什么想法吗 <!DOCTYPE html> <head>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>LD V6</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
font-family:"avenir next", Arial, sans-serif;
font-size: 12px;
color: #696969;
}
.ticks {
font-size: 10px;
}
.track,
.track-inset,
.track-overlay {
stroke-linecap: round;
}
.track {
stroke: #000;
stroke-opacity: 0.3;
stroke-width: 10px;
}
.track-inset {
stroke: #dcdcdc;
stroke-width: 8px;
}
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
stroke: transparent;
cursor: crosshair;
}
.handle {
fill: #fff;
stroke: #000;
stroke-opacity: 0.5;
stroke-width: 1.25px;
}
</style>
</head>
<body>
<div id="vis">
</div>
<script>
var margin = {top:50, right:30, bottom:30, left:30},
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var svg = d3.select("#vis")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
////////// slider //////////
var moving = false;
var currentValue = 0;
var targetValue = 200;
var playButton = d3.select("#play-button");
var x = d3.scaleLinear().range([0, width])
.clamp(true);
var y = d3.scaleLinear().range([height, 0]);
var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + 50 + "," + (height) + ")");
slider.append("line")
.attr("class", "track")
.attr("x1", x.range()[0])
.attr("x2", x.range()[1])
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-inset")
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("start drag", function() {
currentValue = d3.event.x;
update(x.invert(currentValue));
})
);
//Attributes of the slider
slider.insert("g", ".track-overlay")
.attr("class", "ticks")
.attr("transform", "translate(0," + 18 + ")")
/* .selectAll("text")
.data(x.ticks(8))
.enter()
.append("text")
.attr("x", x)
.attr("y", 10)
.attr("text-anchor", "middle")
.text(function(d) { return d.ep); }); */
//Attributes of the slider handle
var handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 8);
/*
var label = slider.append("text")
.attr("class", "label")
.attr("text-anchor", "middle")
.text(formatDate(startDate))
.attr("transform", "translate(0," + (-25) + ")")
*/
////////// plot //////////
var dataset;
var plot = svg.append("g")
.attr("class", "plot")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("trial_v3.csv", prepare, function(data) {
dataset = data;
drawPlot(dataset);
// scale the range of the data
y.domain([0, d3.max(data, function(d) { return d.char; })]);
x.domain([0, d3.max(data, function(d) { return d.ep; })]);
// add the Y Axis
svg.append("g")
.call(d3.axisLeft(y))
.attr("transform", "translate(" + 50 + ",0)");
// add the X Axis
svg.append("g")
.call(d3.axisBottom(x))
.attr("transform", "translate(" + 50 +"," + height + ")")
})
function prepare(d) {
d.ep = d.ep;
d.char = d.char;
return d;
}
function drawPlot(data) {
var locations = plot.selectAll(".location")
.data(data);
// if filtered dataset has more circles than already existing, transition new ones in
locations.enter()
.append("circle")
.attr("class", "location")
.attr("cx", function(d) { return x(d.ep); })
.attr("cy", function(d){ return y(d.char)})
.style("opacity", 0.5)
.attr("r", 5)
.transition()
.duration(1200)
.attr("r", 11
);
// if filtered dataset has less circles than already existing, remove excess
locations.exit()
.remove();
}
function update(h) {
// update position and text of label according to slider scale circle
handle.attr("cx", x(h));
/*label
.attr("x", x(h))
.text(formatDate(h)); */
// filter data set and redraw plot
var newData = dataset.filter(function(d) {
return d.ep < h;
})
drawPlot(newData);
};
/////////////////////////////////////////////////// SVG 2 /////////////////////////////////////////////
/*
var svg2 = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg2.append("rect")
.attr("width", 50)
.attr("height",50)
*/
</script>
</body>
LD V6
身体{
字体系列：“avenir next”，Arial，无衬线；
字体大小：12px；
颜色：#6969；
}
.蜱{
字体大小：10px；
}
.赛道，
.轨道插图，
.轨道覆盖层{
笔划线头：圆形；
}
.赛道{
行程：#000；
笔划不透明度：0.3；
笔划宽度：10px；
}
.轨道插图{
行程：#DCDC；
笔划宽度：8px；
}
.轨道覆盖层{
指针事件：笔划；
笔划宽度：50px；
笔画：透明；
光标：十字线；
}
.处理{
填充：#fff；
行程：#000；
笔划不透明度：0.5；
笔划宽度：1.25px；
}
var margin={顶部：50，右侧：30，底部：30，左侧：30}，
宽度=960-margin.left-margin.right，
高度=600-margin.top-margin.bottom；
var svg=d3。选择（“可视”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）；
//////////滑块//////////
var=false；
var currentValue=0；
var targetValue=200；
var playButton=d3.选择（“播放按钮”）；
var x=d3.scaleLinear（）.range（[0，宽度]）
.夹具（正确）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var slider=svg.append（“g”）
.attr（“类”、“滑块”）
.attr（“变换”、“平移”（“+50+”，“+（高度）+”）；
slider.append（“行”）
.attr（“类”、“轨道”）
.attr（“x1”，x.range（）[0]）
.attr（“x2”，x.range（）[1]）
.select（函数（）{返回this.parentNode.appendChild（this.cloneNode（true））；}）
.attr（“类”、“轨道插入”）
.select（函数（）{返回this.parentNode.appendChild（this.cloneNode（true））；}）
.attr（“类”、“轨道覆盖”）
.call（d3.drag（）
.on（“start.interrupt”，function（）{slider.interrupt（）；}）
.on（“开始拖动”，函数（）{
currentValue=d3.event.x；
更新（x.invert（currentValue））；
})
);
//滑块的属性
滑块.插入（“g”，“轨迹覆盖”）
.attr（“类”、“记号”）
.attr（“转换”、“转换（0、+18+）”）
/*.selectAll（“文本”）
.数据（x.ticks（8））
.输入（）
.append（“文本”）
.attr（“x”，x）
.attr（“y”，10）
.attr（“文本锚定”、“中间”）
.text（函数（d）{return d.ep）；}）*/
//滑块控制柄的属性
变量句柄=滑块.insert（“圆”，“轨迹覆盖”）
.attr（“类”、“句柄”）
.attr（“r”，8）；
/*
var label=slider.append（“文本”）
.attr（“类别”、“标签”）
.attr（“文本锚定”、“中间”）
.文本（格式日期（起始日期））
.attr（“转换”、“转换（0）”+（-25+）”）
*/
//////////密谋//////////
var数据集；
var plot=svg.append（“g”）
.attr（“类”、“图”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.csv（“试用版3.csv”），准备，功能（数据）{
数据集=数据；
绘图（数据集）；
//缩放数据的范围
y、 域（[0，d3.max（数据，函数（d）{return d.char；}）]）；
x、 域（[0，d3.max（数据，函数（d）{return d.ep；}）]）；
//添加Y轴
svg.append（“g”）
.呼叫（d3.左（y））
.attr（“转换”、“转换”（+50+），0）”；
//添加X轴
svg.append（“g”）
.call（d3.axisBottom（x））
.attr（“变换”、“平移”（“+50+”，“+height+”）
})
功能准备（d）{
d、 ep=d.ep；
d、 char=d.char；
返回d；
}
函数绘图（数据）{
变量位置=绘图。选择全部（“位置”）
.数据（数据）；
//如果筛选后的数据集包含的圆比现有的多，请在中转换新的圆
位置。输入（）
.附加（“圆圈”）
.attr（“类别”、“位置”）
.attr（“cx”，函数（d）{返回x（d.ep）；}）
.attr（“cy”，函数（d）{返回y（d.char）}）
.样式（“不透明度”，0.5）
.attr（“r”，5）
.transition（）
.持续时间（1200）
.attr（“r”），11
);
//如果筛选的数据集的圆数少于现有的圆数，请删除多余的圆数
位置。退出（）
.remove（）；
}
功能更新（h）{
//根据滑块比例圆更新标签的位置和文本
handle.attr（“cx”，x（h））；
/*标签
.attr（“x”，x（h））
.文本（格式日期（h））*/
//过滤数据集并重新绘制绘图
var newData=dataset.filter（函数（d）{
返回d.epx（d.ep）