d3 update paths and circles in Graph

126 views
Skip to first unread message

Tobias K

unread,
Apr 15, 2018, 4:24:19 AM4/15/18
to d3-js
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()
to update the circle and 

      g.selectAll("path").attr("d", line);
to update the paths. 

However it does not work.

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.




Here is a JS Fiddle: [LINK][1]
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()
    });


Reply all
Reply to author
Forward
0 new messages