how to update the markers of a multi line on a bru

2019-09-15 16:53发布

问题:

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

}

回答1:

focus.selectAll(".line-point").selectAll("circle").attr("cx", function(d) { return x(d.timestamp); });

thanks @AmeliaBR once again