焦点未正确显示图形D3 javascript

杰弗·威尔逊（Jaffer Wilson）

这是我的Django模板，我在其中使用D3可视化培训：

.line {
      fill: none;
      stroke: gray;
      stroke-width: 2px;
    }

    <meta charset="utf-8">
    <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
     var real = {{values.real0|safe}}, pred = {{values.got0|safe}};
    var margin = {top: 20, right: 20, bottom: 110, left: 50},
        margin2 = {top: 430, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        height2 = 500 - margin2.top - margin2.bottom;
    
    var x = d3.scaleLinear().range([0, width]).domain([0, Object.keys(real).length]),
        x2 = d3.scaleLinear().range([0, width]).domain([0, Object.keys(real).length]),
        y = d3.scaleLinear().range([height, 0]).domain([0, 1]),
        y2 = d3.scaleLinear().range([height2, 0]).domain([0, 1]);
    
    var xAxis = d3.axisBottom(x),
        xAxis2 = d3.axisBottom(x2),
        yAxis = d3.axisLeft(y);
    
    var brush = d3.brushX()
        .extent([[0, 0], [width, height2]])
        .on("brush", brushed);
    
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
    
    svg.append("defs").append("clipPath")
        .attr("id", "clip")
      .append("rect")
        .attr("width", width)
        .attr("height", height);
     var formain = d3.line()
        .x(function(d,i) { return x(i); })
        .y(function(d) { return y(d); });
    
    var forbrush = d3.line()
        .x(function(d,i) { return x2(i); })
        .y(function(d) { return y2(d); });
    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
    
    // Real starts
    var color = d3.scaleLinear()
        .domain([0, 0.5, 1])
        .range(["red", "dodgerblue", "lime"]);
      // x.domain(d3.extent(data, function(d) { return d.date; }));
      // y.domain([0, d3.max(data, function(d) { return d.price; })+200]);
      // x2.domain(x.domain());
      // y2.domain(y.domain());
    
    // append scatter plot to main chart area
     var dots = focus.append("g");
        dots.attr("clip-path", "url(#clip)");
        dots.selectAll("dot")
            .data(real)
            .enter().append("circle")
            .attr('class', 'dot')
            .attr("r",5)
            .style("opacity", .5)
            .attr("cx", function(d,i) { return x(i); })
            .attr("cy", function(d) { return y(d); })
            .attr("fill",(function (d) { return color(d) }));
    focus.append("g")
          .attr("class", "axis axis--x")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
    
    focus.append("g")
          .attr("class", "axis axis--y")
          .call(yAxis);
    
    focus.append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 0 - margin.left)
          .attr("x",0 - (height / 2))
          .attr("dy", "1em")
          .style("text-anchor", "middle")
          .text(Object.keys({{values|safe}}));
    // console.log(Object.keys({{values|safe}}));
    
    
    svg.append("text")
          .attr("transform",
                "translate(" + ((width + margin.right + margin.left)/2) + " ," +
                               (height + margin.top + margin.bottom) + ")")
          .style("text-anchor", "middle")
          .text("index");
    
    // append scatter plot to brush chart area
     var dots = context.append("g");
         dots.attr("clip-path", "url(#clip)");
         dots.selectAll("dot")
            .data(real)
            .enter().append("circle")
            .attr('class', 'dotContext')
            .attr("r",3)
            .style("opacity", .5)
            .attr("cx", function(d,i) { return x2(i); })
            .attr("cy", function(d) { return y2(d); })
            .attr("fill",(function (d) { return color(d) }));
    
    context.append("g")
          .attr("class", "axis axis--x")
          .attr("transform", "translate(0," + height2 + ")")
          .call(xAxis2);
    
    context.append("g")
          .attr("class", "brush")
          .call(brush)
          .call(brush.move, x.range());
    
    focus.append("path")
          .data([real])
          .attr("class", "line")
          .attr("d", formain);
    context.append("path")
          .data([real])
          .attr("class", "line")
          .attr("d", forbrush);
    
    
    //create brush function redraw scatterplot with selection
    function brushed() {
      var selection = d3.event.selection;
      x.domain(selection.map(x2.invert, x2));
      focus.selectAll(".dot")
            .attr("cx", function(d,i) { return x(i); })
            .attr("cy", function(d) { return y(d); });
      context.selectAll(".line")
            .attr("cx", function(d,i) { return x(i); })
            .attr("cy", function(d) { return y(d); });
      focus.select(".axis--x").call(xAxis);
      context.select(".axis--x").call(xAxis2);
    }
    
    </script>

我收到的输出如下所示：

我想要的是放大镜焦点应显示线条和点的相应内容。另外，我希望背景中的线和前景中的点。

请帮助我修改样本供我使用。我想我缺少一些属性。

样本CSV需要的是：示例CSV

您周围的奇妙事物

尝试更改几件事，它将起作用。见下文：

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

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
focus.append("path")
      .data([real])
      .attr("class", "line")
      .attr("d", formain);
context.append("path")
      .data([real])
      .attr("class", "line")
      .attr("d", forbrush);

如前所述放置它。
如下更改brushed()功能：

function brushed() {
  var selection = d3.event.selection;
  x.domain(selection.map(x2.invert, x2));
  focus.selectAll(".dot")
        .attr("cx", function(d,i) { return x(i); })
        .attr("cy", function(d) { return y(d); });
  focus.selectAll(".line")
      .attr("d",formain)

}

见我的输出。有效。：