d3.js - 刷牙以协调显示：时间轴焦点

Question

d3刷牙有问题。我正在从JSON文件中读取数据，该文件在顶部时间轴（上下文）上显示所有数据，并允许刷新以显示在底部时间轴（焦点）上。

轴正常显示但“rects”未更新。我曾尝试使用brush.extent（）作为JSON对象的选定子集的引用，但它似乎不起作用。也许它正在改变JSON格式？

我真的在这里不知所措。我一直在使用本教程：

jsfiddle在这里：http://bl.ocks.org/mbostock/1667367。 跳到第2487行，粘贴JSON文档是我能让jsfiddle工作的唯一方法。

此处提供实时版本：https://jsfiddle.net/typegray/7rwo8ajL/6/

function d3SessionView() {

    var w = parseFloat(d3.select("#d3SessionOverview").style("width"));
    var h = 204;

    var talkTurns = data.session.talkTurn;
    var selected = talkTurns;

    var bar1Margin = {top: 24, right: 0, bottom: 24, left: 0};
    var bar2Margin = {top: 24, right: 0, bottom: 24, left: 0};
    var bar1Height = (h - bar1Margin.top - bar1Margin.bottom - bar2Margin.top - bar2Margin.bottom) / 2;
    var bar2Height = (h - bar1Margin.top - bar1Margin.bottom - bar2Margin.top - bar2Margin.bottom) / 2;

    var x = d3.scale.linear()
        .domain([0, d3.max(talkTurns, function(d) { 
            return d.endTime;
        })])
        .range([0, w]);
    var x2 = d3.scale.linear()
        .domain([0, d3.max(talkTurns, function(d) { 
            return d.endTime;
        })])
        .range([0, w]);

    var xAxis = d3.svg.axis().scale(x).orient("top");
    var x2Axis = d3.svg.axis().scale(x2).orient("top");

    var brush = d3.svg.brush()
        .x(x)
        .extent([0, d3.max(talkTurns, function(d) {
            return d.endTime / 10;
        })])
        .on("brush", brushed);

    var svg = d3.select("#d3SessionOverview").append("svg")
        .attr("width", w)
        .attr("height", h);

    var context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + bar1Margin.left + "," + bar1Margin.top + ")");

    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + bar2Margin.left + "," + (bar1Margin.top + bar1Height + bar1Margin.bottom + bar2Margin.top) + ")");

    x.domain([0, d3.max(talkTurns, function(d) {
        return d.endTime;
    })]);
    x2.domain(x.domain());

    focus.selectAll("rect").data(brush.extent())
        .enter()
        .append("rect")
        .attr("x", function(d) {
            return x2(d.startTime);
        })
        .attr("width", function(d) {
            return x2(d.duration);
        })
        .attr("height", bar1Height)
        .attr("class", function(d) {
            if (d.speaker == "therapist") {
                return "greenFill";
            } else {
                return "blueFill";
            }
        })
        .attr("fill-opacity", function(d) {
            return d.vocalArousal;
        });

    focus.append("g")
        .attr("class", "x axis")
        .call(xAxis);

    context.selectAll("rect").data(talkTurns)
        .enter()
        .append("rect")
        .attr("x", function(d) {
            return x(d.startTime);
        })
        .attr("width", function(d) {
            return x(d.duration);
        })
        .attr("height", bar1Height)
        .attr("class", function(d) {
            if (d.speaker == "therapist") {
                return "greenFill";
            } else {
                return "blueFill";
            }
        })
        .attr("fill-opacity", function(d) {
            return d.vocalArousal;
        });

    context.append("g")
        .attr("class", "x axis")
        .call(x2Axis);

    context.append("g")
        .attr("class", "x brush")
        .call(brush)
        .selectAll("rect")
        .attr("height", bar1Height / 2);

    function brushed() {
        if (brush.empty()) {
            x2.domain(x.domain());
        } else {
            x2.domain(brush.extent());
        }

        focus.selectAll("rect").data(brush.extent())
            .enter()
            .append("rect")
            .attr("x", function(d) {
                return x2(d.startTime);
            })
            .attr("width", function(d) {
                return x2(d.duration);
            })
            .attr("height", bar1Height)
            .attr("class", function(d) {
                if (d.speaker == "therapist") {
                    return "greenFill";
                } else {
                    return "blueFill";
                }
            })
            .attr("fill-opacity", function(d) {
                return d.vocalArousal;
            });

        focus.select(".x.axis").call(x2Axis);
    }