动画阻碍线图中的刷功能

Question

我正在画一条多线和一条普通的林。并将它们添加到画笔功能中。但是当我选择画笔大小时，会为该画笔大小部分绘制线条。为什么呢？

var x = d3.time.scale().range([0, width]);
var x2= d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var y2 = d3.scale.linear().range([height2, 0]);



var color = d3.scale.ordinal().range(["#ff0000", "#2ca02c","#ff0000"]);


var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(25);
var xAxis2 = d3.svg.axis().scale(x2).orient("bottom");

var yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);

var line = d3.svg.line()
    .interpolate("step-after")
    .x(function(d) { return x(d.timestamp); })
    .y(function(d) { return y(d.limit); });

var valueline = d3.svg.line().defined(function(d) { return d.metric_value != 0; }).x(function(d) { return x(d.timestamp); }).y(function(d) { return y(d.metric_value); });

var valueline2 = d3.svg.line().defined(function(d) { return d.metric_value != 0; }).x(function(d) { return x2(d.timestamp); }).y(function(d) { return y2(d.metric_value); });

var valueline3=d3.svg.line()
    .interpolate("step-after")
    .x(function(d) { return x2(d.timestamp); })
    .y(function(d) { return y2(d.limit); });

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brushed);

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0).style("float","left");    

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 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 + ")");







var arr=new Array();
// Get the data
d3.json("data/spc-calculation.php?m_id=<?php echo $m_id;?>", function(error, data) { 

color.domain(d3.keys(data[0]).filter(function(key) { if( key =="mean"   || key == "unpl" || key=="lnpl") return key; }));


    data.forEach(function(d,i) {



    //document.write(d.timestamp);
    d.timestamp = parseDate(d.timestamp);
    //document.write(d.timestamp);
        d.metric_value = +d.metric_value;
            });


var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {timestamp: d.timestamp, limit: +d[name]};
      })
    };
  });






 var min=0;
var max=200;
// Scale the range of the data

    x.domain(d3.extent(data, function(d) { return d.timestamp; }));

  //  y.domain([min-10, max+10]);
    //y.domain([0, d3.max(data, function(d) { return d.ucl; })]);

y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.limit; }); })-5,
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.limit; }); })
  ]);

    x2.domain(x.domain());
     y2.domain(y.domain());


    //y.domain([lsl-5, d3.max(data, function(d) { return d.metric_value; })]);


  var city= focus.selectAll(".city")
      .data(cities)
      .enter().append("g")
      .attr("class", "city");
 var bad=city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); })
    .style("opacity",0.5);


var totalLength = bad.node().getTotalLength();

    bad
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(4000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);




    var marker=focus.selectAll(".dot").data(cities).enter().append("g").attr("class", "city");
    marker.append("circle")
        .attr("r", 2).attr("class", "line")
        .attr("d", function(d) { return line(d.values); })
        .style("fill", function(d) { return color(d.name); });



   var add=focus.append("path")     // Add the valueline path.
    .datum(data)
        .attr("class","valueline")
    .attr("d", valueline);

    var totalLength = add.node().getTotalLength();

    add
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(4000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);





/*
city.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.timestamp) + "," + y(d.value.limit) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

*/


            // Add the X Axis

    focus.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis)
    .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-65)" 
                });


    focus.append("text")             // text label for the x axis
        .attr("x", width/2 )
        .attr("y",  height+margin.bottom)
        .style("text-anchor", "middle")
        .text("Date");  

// Add the Y Axis

    focus.append("g").attr("class", "y axis").call(yAxis);

    focus.append("text").attr("transform","rotate(-90)").attr("y", 0-margin.left+10 )
        .attr("x",0-( height/2) )
        .style("text-anchor", "middle")
    .style("text-decoration", "underline")  
        .text("issue"); 

    //title to graph
focus.append("text")
        .attr("x", (width / 2))             
        .attr("y", 5)
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Issue vs Date Graph");


context.append("path")      // Add the valueline path.
        .attr("d", valueline2(data));




context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);


context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", height2 + 7);



});


function brushed() {

  x.domain(brush.empty() ? x2.domain() : brush.extent());


  focus.selectAll(".valueline").attr("d",valueline);
  focus.selectAll(".dot").select("circle").attr("cx", function(d) { return x(d.timestamp); });
  focus.selectAll("g.city path.line").attr("d",function(d){return line(d.values);});
  focus.select(".x.axis").call(xAxis);
}

function type(d) {
  d.timestamp = parseDate(d.timestamp);
  d.metric_value = +d.metric_value;
  return d;
}

我想在多行中添加标记我该怎么做？以及如何在画笔图中绘制相同的多线？