Javascript 如何更新笔刷上多行的标记？

画多条线

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

再次感谢@AmeliaBR

元素没有

“d”

属性，您需要在笔刷函数中设置

cx

和

cy

属性，就像您第一次创建它们时一样，使用现在更新的比例。（由于您只更新x-scale，实际上只需更新

cx

属性即可。）@AmeliaBR focus.selectAll（“.line point”）.attr（“cx”，函数（d）{return x（d.timestamp）；}）；正在工作。我是否应该将线点更改为其他点。我指的是正确的点类吗？“线点”类是在

元素上设置的，而不是在

元素上设置的。您仍然需要选择组中的圆。您还应该更改行

点。在原始代码中选择All（'.line point'）

，因为它只是混淆了问题--

点

有那个类，而不是它的子类。

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

}

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