Javascript D3滑动焦点与语境

我使用画笔查看了本教程，重点和上下文。我也有类似的需求，但我需要允许用户左右滑动以查看不同的上下文，而不是使用底部的笔刷

我的问题：

如果我有2016年1月1日至12月31日的数据。我是否必须按周手动拆分数据，或者我是否可以控制或设置默认的7天以显示在视图中，以及如何更改同一年数据集的上下文

如果我可以在视图中设置默认的7天，我如何允许用户向左滑动将图形沿时间线向上移动，向右滑动将时间向后移动，直到到达终点

我所做的

var width = 500,
    height = 600,
    margin = {top:20, right: 10, bottom: 20, left: 10};
var mainSvg = d3.select('#svg-bars')
    .append('svg')
    .attr('width', width)
    .attr('height', height)

var midLine = mainSvg.append('line')
    .attr('x1', 250)
    .attr('y1', 0)
    .attr('x2', 250)
    .attr('y2', 600)
    .attr('stroke-width', 2)
    .attr('stroke', '#48BDC3')
    .attr('stroke-dasharray', 3);

var orgData = getData();


createTempChart();
createUsageChart();

/////////////////////////////////



function createTempChart() {
    var width = 500 - margin.left - margin.right,
        height = 200 - margin.top - margin.bottom;

    // Setup Scales
    var xScale = d3.scaleTime()
        .domain([getDate(orgData[0]), getDate(orgData[orgData.length - 1])])
        .range([0, width]);
    var yScale = d3.scaleLinear()
        .domain([d3.min(orgData,domainTemp), d3.max(orgData, domainTemp)])
        .range([height, 0]);
    // Setup x-Axis
    var yAxis = d3.axisLeft(yScale)
        .tickArguments([3])
        .tickSize(0);

    var lineFunction = d3.line()
        .x(function (d) {return xScale(getDate(d))})
        .y(function (d) {return yScale(getTemp(d))})
        .curve(d3.curveCardinal);

    var weatherChart = mainSvg
        .append('g')
        .attr('class','weather-chart')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    weatherChart.selectAll('circle')
        .data(orgData)
        .enter()
        .append('circle')
        .attr('cx', function (d) {return xScale(getDate(d));})
        .attr('cy', function (d) {return yScale(getTemp(d));})
        .attr('r', 5);

    weatherChart.append('path')
        .attr('d', lineFunction(orgData))
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');

    weatherChart.append('g')
        .attr('class','y-axis')
        .attr('transform', 'translate(' + margin.left + ',0)')
        .call(yAxis);
}

function createUsageChart() {

    var width = 500 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var xScale = d3.scaleTime()
            .domain([getDate(orgData[0]), getDate(orgData[orgData.length-1])])
            .range([0, width]),
        yScale = d3.scaleLinear()
            .domain([0, d3.max(orgData, domainY)])
            .range([height,0]);

// Setup x-Axis
    var xAxis = d3.axisBottom(xScale)
    .tickArguments([7])
        .tickSize(0);
    var yAxis = d3.axisLeft(yScale)
        .tickArguments([2, ''])
        .tickSize(0);

    var lineFunction = d3.line()
        .x(function(d){return xScale(getDate(d))})
        .y(function(d){return yScale(d.kWh)})
        .curve(d3.curveCardinal);


    var svg = mainSvg
        .append('g')
        .attr('transform', 'translate(0,300)')
        .attr('class','usage-chart')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    svg.selectAll('circle')
        .data(orgData)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
            return xScale(getDate(d));
        })
        .attr('cy', function (d) {
            return yScale(d.kWh);
        })
        .attr('r', 5);

    svg.append('path')
        .attr('d', lineFunction(orgData));

    svg.append('g')
        .attr('class','y-axis')zq
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

    svg.append('g')
        .attr('class', 'y-axis')
        .attr('transform', 'translate(' + margin.left + ',0)')
        .call(yAxis);

}


function getData(){
    return [{"date":"2016-08-01T00:00:00-05:00","kWh":0.43590624999999994,"temp":89},{"date":"2016-08-02T00:00:00-05:00","kWh":0.3778749999999999,"temp":81},{"date":"2016-08-03T00:00:00-05:00","kWh":0.36741666666666667,"temp":78},{"date":"2016-08-04T00:00:00-05:00","kWh":0.3568229166666667,"temp":77},{"date":"2016-08-05T00:00:00-05:00","kWh":0.3960416666666667,"temp":73},{"date":"2016-08-06T00:00:00-05:00","kWh":0.3565833333333333,"temp":83},{"date":"2016-08-07T00:00:00-05:00","kWh":0.2819062500000001,"temp":71}];
    }

function domainX (datum){
    return getDate(datum.date);
}

function domainY (datum){
    return datum.kWh;
}

function domainTemp (datum){
    return datum.temp;
}


function getDate(d) {
    return new Date(d.date);
}

function getTemp(d) {
    return d.temp
}
function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

我对数据可视化、SVG和d3还不熟悉，所以我读了

创建了一个数据库，将数据手动过滤到七天的窗口中，其中有两个图表，都具有时间刻度。当用户滑动时，我需要更改两个图形的时间刻度

数据格式

{
   date: '2016-08-01',
   kWh: 0.178,
   temp: 78
}

---

主代码

var width = 500,
    height = 600,
    margin = {top:20, right: 10, bottom: 20, left: 10};
var mainSvg = d3.select('#svg-bars')
    .append('svg')
    .attr('width', width)
    .attr('height', height)

var midLine = mainSvg.append('line')
    .attr('x1', 250)
    .attr('y1', 0)
    .attr('x2', 250)
    .attr('y2', 600)
    .attr('stroke-width', 2)
    .attr('stroke', '#48BDC3')
    .attr('stroke-dasharray', 3);

var orgData = getData();


createTempChart();
createUsageChart();

/////////////////////////////////



function createTempChart() {
    var width = 500 - margin.left - margin.right,
        height = 200 - margin.top - margin.bottom;

    // Setup Scales
    var xScale = d3.scaleTime()
        .domain([getDate(orgData[0]), getDate(orgData[orgData.length - 1])])
        .range([0, width]);
    var yScale = d3.scaleLinear()
        .domain([d3.min(orgData,domainTemp), d3.max(orgData, domainTemp)])
        .range([height, 0]);
    // Setup x-Axis
    var yAxis = d3.axisLeft(yScale)
        .tickArguments([3])
        .tickSize(0);

    var lineFunction = d3.line()
        .x(function (d) {return xScale(getDate(d))})
        .y(function (d) {return yScale(getTemp(d))})
        .curve(d3.curveCardinal);

    var weatherChart = mainSvg
        .append('g')
        .attr('class','weather-chart')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    weatherChart.selectAll('circle')
        .data(orgData)
        .enter()
        .append('circle')
        .attr('cx', function (d) {return xScale(getDate(d));})
        .attr('cy', function (d) {return yScale(getTemp(d));})
        .attr('r', 5);

    weatherChart.append('path')
        .attr('d', lineFunction(orgData))
        .attr('stroke', 'blue')
        .attr('stroke-width', 2)
        .attr('fill', 'none');

    weatherChart.append('g')
        .attr('class','y-axis')
        .attr('transform', 'translate(' + margin.left + ',0)')
        .call(yAxis);
}

function createUsageChart() {

    var width = 500 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

    var xScale = d3.scaleTime()
            .domain([getDate(orgData[0]), getDate(orgData[orgData.length-1])])
            .range([0, width]),
        yScale = d3.scaleLinear()
            .domain([0, d3.max(orgData, domainY)])
            .range([height,0]);

// Setup x-Axis
    var xAxis = d3.axisBottom(xScale)
    .tickArguments([7])
        .tickSize(0);
    var yAxis = d3.axisLeft(yScale)
        .tickArguments([2, ''])
        .tickSize(0);

    var lineFunction = d3.line()
        .x(function(d){return xScale(getDate(d))})
        .y(function(d){return yScale(d.kWh)})
        .curve(d3.curveCardinal);


    var svg = mainSvg
        .append('g')
        .attr('transform', 'translate(0,300)')
        .attr('class','usage-chart')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    svg.selectAll('circle')
        .data(orgData)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
            return xScale(getDate(d));
        })
        .attr('cy', function (d) {
            return yScale(d.kWh);
        })
        .attr('r', 5);

    svg.append('path')
        .attr('d', lineFunction(orgData));

    svg.append('g')
        .attr('class','y-axis')zq
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

    svg.append('g')
        .attr('class', 'y-axis')
        .attr('transform', 'translate(' + margin.left + ',0)')
        .call(yAxis);

}


function getData(){
    return [{"date":"2016-08-01T00:00:00-05:00","kWh":0.43590624999999994,"temp":89},{"date":"2016-08-02T00:00:00-05:00","kWh":0.3778749999999999,"temp":81},{"date":"2016-08-03T00:00:00-05:00","kWh":0.36741666666666667,"temp":78},{"date":"2016-08-04T00:00:00-05:00","kWh":0.3568229166666667,"temp":77},{"date":"2016-08-05T00:00:00-05:00","kWh":0.3960416666666667,"temp":73},{"date":"2016-08-06T00:00:00-05:00","kWh":0.3565833333333333,"temp":83},{"date":"2016-08-07T00:00:00-05:00","kWh":0.2819062500000001,"temp":71}];
    }

function domainX (datum){
    return getDate(datum.date);
}

function domainY (datum){
    return datum.kWh;
}

function domainTemp (datum){
    return datum.temp;
}


function getDate(d) {
    return new Date(d.date);
}

function getTemp(d) {
    return d.temp
}
function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}