Question

我查看了这个教程http://bl.ocks.org/mbostock/1667367，使用了关注焦点和上下文。我有类似的需求，但我需要允许用户左右滑动以查看不同的上下文而不是使用底部的画笔。

我的问题：

如果我有2016年1月1日至12月31日的数据。我是否必须手动将数据拆分数周，或者我可以控制或设置默认的7天在视图中显示，以及一些如何在同一年更改上下文数据集。
如果我可以在视图中设置默认的7天，如何让用户向左滑动以在时间线上向上移动图形，向右滑动以及时向后移动直到结束？

我做了什么

我是数据可视化，SVG和d3的新手，所以我读了Interactive Data Visualization。
创建了一个fiddle，手动将数据过滤到七天窗口here，其中包含两张图表，两者都具有时间比例。我需要在用户滑动时更改两个图表的时间刻度。

数据格式

{
   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);
}

D3滑动焦点和上下文

0 个答案: