Question

我有一个小缩放和可滚动的散点图。我希望能够点击项目并重定向到网站。当我点击后退按钮时，我希望图形显示与单击按钮时显示的完全相同的内容。目前它只是回到默认视图。

我试图保存x轴的状态，这显然有效，如下所示：

{{$index}}

但是，我不确定如何从这里开始。当我更新我的视图时，我尝试手动设置它，但这并没有做任何事情

localStorage.setItem("minDate", xScale.domain()[0]);
localStorage.setItem("maxDate", xScale.domain()[1]);

Here's a link to my jsFiddle

更改域名似乎是错误的方式，我想我会尝试将其集中在点击的点上并转换到该位置。

Answer 1

您可以收听window.beforeunload事件以保存translate的缩放/拖动状态的scale和plotChart值然后您可以在页面时应用它们接下来加载，否则你恢复到默认值。

见下面的代码：

window.onbeforeunload = function (e) {
    localStorage.setItem("myScale", myScale);
    localStorage.setItem("myTranslateX", myTranslate[0]);
    localStorage.setItem("myTranslateY", myTranslate[1]);
};

var margin = {
    top: 40,
    right: 20,
    bottom: 20,
    left: 20
},
width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;


window.myScale = 1;
window.myTranslate = [margin.left, margin.top];

if (localStorage.getItem('myScale') !== null) {
    myScale = localStorage.getItem('myScale');
}

if (localStorage.getItem('myTranslateX') !== null && localStorage.getItem('myTranslateY') !== null && (localStorage.getItem('myTranslateX') !== 0 && localStorage.getItem('myTranslateY') !== 0)) {
    myTranslate = [localStorage.getItem('myTranslateX'), localStorage.getItem('myTranslateY')];
}

var currentDate = new Date();
var minDate = new Date().setMonth((currentDate.getMonth() - 5));
var maxDate = new Date().setMonth((currentDate.getMonth() + 2));

var plotChart = d3.select("body").classed('chart', true).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 + ')');
var myZoom = d3.behavior.zoom().scale(myScale).translate(myTranslate).on("zoom", redraw);
plotChart.call(myZoom)
    .append('g');

var plotArea = plotChart.append('g')
    .attr('clip-path', 'url(#plotAreaClip)');

plotArea.append('clipPath')
    .attr('id', 'plotAreaClip')
    .append('rect')
    .attr({
    width: width,
    height: height
});


//x and y axis
var xScale = d3.time.scale()
    .domain([minDate, maxDate])
    .range([0, width]);
var yScale = d3.scale.linear()
    .domain([0, 4])
    .range([height, 0]);
var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(5)
    .tickSize(height)
    .orient("top");
var yAxis = d3.svg.axis()
    .scale(yScale)
    .ticks(4)
    .tickSize(width)
    .orient("right");

plotChart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
var gy = plotChart.append("g")
    .attr("class", "y axis")
    .call(yAxis);

gy.selectAll("text")
    .attr("x", 0)
    .attr("y", -30)
    .attr("dy", -4);

plotChart.append('rect')
    .attr("y", 0)
    .attr('width', width)
    .attr('height', height)
    .attr('fill', 'white')
    .attr("fill-opacity", 0);

if (myTranslate != [0, 0]) {
    plotChart.attr('transform', "translate(" + myTranslate[0] + "," + myTranslate[1] + ")" + " scale(" + myScale + ")");
}

function redraw() {
    plotChart.attr("transform",
        "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
    myScale = d3.event.scale;
    myTranslate = d3.event.translate;
}

演示：http://jsfiddle.net/robschmuecker/wnrmjrc9/

Answer 2

嘿你可以使用onbeforeunload事件。

http://www.w3schools.com/jsref/event_onbeforeunload.asp

JavaScript d3.js在离开网站时保存图表

2 个答案: