我有一个不会缩放的散点图,并且在拖动和缩放时不会移动平均线。 平均线保持不变。
var margin = {top: 50, right: 20, bottom: 100, left: 80};
var width = 1024 - margin.left - margin.right;
var height = 390;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
d3.json("data.json", function(error, data) {
data.forEach(function(d)
d.date = parseDate(d.date);
d.tiempo = +d.tiempo;
});
var x = d3.time.scale().range([0, width])
.domain(d3.extent(data, function(d) { return d.date; }))
.nice();
var y = d3.scale.linear().range([height, 0])
.domain([0, d3.max(data, function(d) { return d.tiempo; })])
.nice();
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 100])
.on("zoom", zoomed);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(15)
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(15)
.tickSize(-width);
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 + ")")
.call(zoom);
var Rect = svg.append("rect")
.attr("width", width)
.attr("height", height);
// Eje X
svg.append("g")
.classed("x axis", true)
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.classed("label", true)
.attr("x", width)
.attr("y", margin.bottom - 10)
.style("text-anchor", "end")
.text("Tiempo de llegada");
// Eje Y
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.classed("label", true)
.attr("transform", "rotate(-90)")
.attr("y", -margin.left)
.attr("dy", "1.91em")
.style("text-anchor", "end")
.text("Tiempos de espera")
// Objetos, puntos.
var objects = svg.append("svg")
.classed("objects", true)
.attr("width", width)
.attr("height", height);
objects.append("svg:line")
.classed("axisLine hAxisLine", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", width)
.attr("y2", 0)
.attr("transform", "translate(0," + height + ")");
objects.append("svg:line")
.classed("axisLine vAxisLine", true)
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 0)
.attr("y2", height);
var puntos = objects.selectAll(".dot")
.data(data)
.enter().append("circle")
.classed("dot", true)
.attr("r", 3.5)
.attr("class", function(d) {
if(d.d7up==1) {
return "dot s7";
}else if(d.d7do==1) {
return "dot b7";
};
return "dot pu";
});
puntos.attr("transform", transform);
var meanData = [
{date: data[0].date, tiempo: 6.22},
{date: data[data.length - 1].date, tiempo: 6.22}
];
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tiempo); });
var l = objects.selectAll(".lineamedia")
.data(meanData)
.enter().append("circle")
.classed("lineamedia", true)
.attr("r", 5)
.attr("stroke", "red")
.attr("fill", "red")
.attr("transform", transform);
var ll = objects.append("g")
.classed("grupolinea", true);
ll.append("line")
.attr("x1", x(meanData[0].date))
.attr("y1", y(meanData[0].tiempo))
.attr("x2", x(meanData[meanData.length - 1].date))
.attr("y2", y(meanData[meanData.length - 1].tiempo))
.attr("stroke", "red")
.attr("fill", "red")
.attr("stroke-width", 4)
.classed("medias", true);
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
//svg.selectAll(".dot").attr("transform", transform);
puntos.attr("transform", transform);
l.attr("transform", transform);
//svg.select(".grupolinea").attr("transform", transform);
}
function transform(d) {
return "translate(" + x(d.date) + "," + y(d.tiempo) + ")";
}
})
我的数据阵列是:
var = data[{"date":"2016-04-25 07:37:24","tiempo":29.366666666667}, {"date":"2016-04-25 08:18:36","tiempo":8.4833333333333},{"date":"2016-04-25 08:32:15","tiempo":5.25},{"date":"2016-04-25 08:40:57","tiempo":2.4166666666667},{"date":"2016-04-25 08:41:09","tiempo":5.3166666666667},{"date":"2016-04-25 08:58:10","tiempo":5.5833333333333},{"date":"2016-04-25 09:00:20","tiempo":4.2166666666667},{"date":"2016-04-25 09:00:42","tiempo":5.2666666666667}]
图表de等待在哪里 日期:来病人; 时间:等待的时间;