Question

我的第一个d3项目快要完成了-这是一个d3.js，可以使用r2d3集成到R发光仪表板中（当前工作版本为https://awkruijt.shinyapps.io/reliability_diff_dashboard/，我尝试通过该版本更新y轴在左侧的图上，但无法使其也将圆移到此处的新位置：https://awkruijt.shinyapps.io/relDB_plotleft_not_updating_correctly/）。

在以上发布的两个版本中，当将点拖到当前区域之外时，右侧图会更新x轴。现在，我尝试对左图执行相同的操作，然后更新y轴。但是：我无法获得适用于右侧图的代码，也无法适用于左侧图-最具体地说：无法获取将点移动到新位置的代码（线条更新良好）。我怀疑这与使用嵌套数据的左侧图有关。

这里有一个非常问题：d3 move circles on y axis update，但是即使提供了答案，我似乎也无法运行它。

这是我最初用来绘制圆的代码：

 focus.selectAll('circles')
   .data(dById)
   .enter().append("g")
   .selectAll("circle")
   .data(function(d) {return d.values;})
   .enter().append("circle")
   .attr("cx", function(d) { return x(d.tt); })
   .attr("cy", function(d) { return y(d.RT); })
   .attr("r", 6)
   .style('cursor', 'pointer')
   .attr("fill", function(d) { return color(d.ID); })
   .attr("stroke", function(d) { return color(d.ID); });

这或多或少是我认为应该在y轴更新后更新圆的代码：

// transition the data dots  
  var circles = focus.selectAll("circles");
//  .data(dById)
//  .enter().append("g")
//  .merge(circles);

  var circle = circles.selectAll("circle");
//    .data(function(d) {return d.values;});

 focus.selectAll("circle")
   .enter().append("circle")
    .merge(circle)
    .attr("cx", function(d) {return x(d.tt);})
    .attr("cy", function(d) {return y(d.RT);});

~~当然，我很想为您提供一个工作的小提琴，但是我似乎无法使其真正运行-这是我的尝试： https://jsfiddle.net/96Lma1cx/~~
这是一个jsfiddle：https://jsfiddle.net/ngko820e/

任何帮助将不胜感激！

Answer 1

最终工作版本：https://jsfiddle.net/2qmygfvx/

问题的确是在每个阶段选择正确的数据，最终我通过为不同元素调用（并根据需要添加）类来最终解决了问题。

这里有一些特定的代码可用来更新圈子：

     // transition the data dots 
     var circledots = focus.selectAll("circle.dots")

     focus.selectAll("circle.dots")
       .enter().append("circle")
       .merge(circledots)
       .attr("cx", function(d) {
         return x(d.tt);
       })
       .attr("cy", function(d) {
         return y(d.RT);
       });

到目前为止，人们如何看待控制台仍然是我的一个谜，并感谢rioV8推动我使用浏览器的控制台。

d3.js在轴更新之后更新嵌套的数据圈（enter.merge（））吗？

1 个答案: