d3更新图表中的路径和圆 [英] d3 update paths and circles in Graph

问题描述

我想更新图表，但它不起作用.我想更新线条和圆圈.我尝试添加

i want to update the graph but it does not work. I want to update the line and the circles. I tried to add

.exit().remove()

更新圈子和

  g.selectAll("path").attr("d", line);

更新路径.

但是它不起作用.

使用exit().remove()更新外部组工作正常. (在此示例中为复选框).

Updating the outside group with exit().remove() works fine. (Checkbox in this example).

仅更新路径和圆不起作用. (在此示例中为更新按钮")

Updating only the path and circle does not work. (Update Button in this example)

我不想删除图形中的所有线条并再次附加它，因为我想在数据更改时添加过渡.

I dont want to remove all lines in the graph and append it again, because i want to add transition when data changes.

这是一个JS小提琴: LINK 这是我的代码:

Here is a JS Fiddle: LINK Here is my code:

var data = [
  [{
    point: {
      x: 10,
      y: 10
    }
  }, {
    point: {
      x: 100,
      y: 30
    }
  }],
  [{
      point: {
        x: 30,
        y: 100
      }
    }, {
      point: {
        x: 230,
        y: 30
      }
    },
    {
      point: {
        x: 50,
        y: 200
      }
    },
    {
      point: {
        x: 50,
        y: 300
      }
    },
  ]
];

var svg = d3.select("svg");

var line = d3.line()
  .x((d) => d.point.x)
  .y((d) => d.point.y);

function updateGraph() {
  console.log(data)
  var allGroup = svg.selectAll(".pathGroup").data(data);
  var g = allGroup.enter()
    .append("g")
    .attr("class", "pathGroup")
  allGroup.exit().remove()

  g.append("path")
    .attr("class", "line")
    .attr("stroke", "red")
    .attr("stroke-width", "1px")
    .attr("d", line);

  g.selectAll("path").attr("d", line);

  g.selectAll(null)
    .data(d => d)
    .enter()
    .append("circle")
    .attr("r", 4)
    .attr("fill", "teal")
    .attr("cx", d => d.point.x)
    .attr("cy", d => d.point.y)
    .exit().remove()

}
updateGraph()

document.getElementById('update').onclick = function(e) {

  data = [
    [{
      point: {
        x: 10,
        y: 10
      }
    }, {
      point: {
        x: 100,
        y: 30
      }
    }],
    [{
        point: {
          x: 30,
          y: 100
        }
      }, {
        point: {
          x: 230,
          y: 30
        }
      },
      {
        point: {
          x: 50,
          y: 300
        }
      },
    ]
  ];
  updateGraph()
}


$('#cb1').click(function() {
  if ($(this).is(':checked')) {
    data = [
      [{
        point: {
          x: 10,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }],
      [{
          point: {
            x: 30,
            y: 100
          }
        }, {
          point: {
            x: 230,
            y: 30
          }
        },
        {
          point: {
            x: 50,
            y: 200
          }
        },
        {
          point: {
            x: 50,
            y: 300
          }
        },
      ]
    ];

  } else {
    data = [
      [{
        point: {
          x: 10,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }]
    ];
  }
  updateGraph()
});

推荐答案

问题

allGroup.exit().remove()不执行任何操作的原因是，更新后的数据集仍具有与原始数据集相同的项目数.因此，退出选择为空.

Problem

The reason why allGroup.exit().remove() does nothing is that the updated dataset still has the same number of items as the original one. The exit selection is therefore empty.

变量data包含线，而不是点.在页面加载时定义的一个，在update侦听器内部的一个包含两行，只是其中的点数不同.

The variable data contains lines, not points. The one defined at page load, and the one inside update listener contain two lines, only the number of points in them differs.

您可以通过在功能updateGraph内放置console.log(data.length)来进行检查.

You can check this by putting a console.log(data.length) inside function updateGraph.

更改您的数据结构.您可以为每行分配一个id属性，并使用.data的key函数. cf. d3选择文档.

Change your data structure. You can assign an id property to each line, and use .data's, key function. cf. d3-selection documentation.

更新了jsFiddle实现解决方案1:请参见此处.

Updated jsFiddle implementing solution 1: see here.

此解决方案所需的更改较少.

This solution requires less changes.

如果您无法控制数据结构，则可以在update选择中而不是exit内转换线图.

In case you have no control over the data structure, you can transition the line drawing inside the update selection, rather than the exit one.

这篇关于d3更新图表中的路径和圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！