如何在散点图中移动平均固定线?

时间:2016-04-29 17:08:09

标签: d3.js plot mean scatter

我有一个不会缩放的散点图,并且在拖动和缩放时不会移动平均线。 平均线保持不变。

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等待在哪里 日期:来病人; 时间:等待的时间;

0 个答案:

没有答案