to draw multi line
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);
code for the markers of multi lines
var point = city.append("g")
.attr("class", "line-point");
point.selectAll('.line-point')
.data(function(d){ return d.values})
.enter()
.append('circle')
.attr("cx", function(d) { return x(d.timestamp) })
.attr("cy", function(d) { return y(d.limit) })
.attr("r", 1)
.style("fill", "grey")
.on("mouseover", function(d,i) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(function(){
{ return formatTime(d.timestamp) + "<br/><b>" + d.limit+ "</b>"}
;})
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
}).style("pointer-events","visible");
this is how i have tried to update it in the brush() function
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);});
// update markersin multi line
focus.selectAll(".line-point").select("circle").attr("d",function(d){return (d.values);});
focus.select(".x.axis").call(xAxis);
}