D3 js update plot just adds new points in the background rather than on top

Question

I am trying to add data on my existing scatter plot but I would like to have the added data points to be in the background or back rather than being on top. When I am appending the new data into the graph I would like it to go in the back and not on top. I would like the original data set to be the top data points. When I am adding the new data it is triggered by the button. And I would rather not have to empty the svg and then reload. I hope this makes sense.

code for original scatter plot before adding more data:

var svg = d3.select("#plot").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);
var xMax = d3.max(graphdata, function(d) { return d["x"]; }),
          yMax = d3.max(graphdata, function(d) { return d["y"]; });
var xScale = d3.scaleLinear()
    .range([0, width])
    .domain([0, xMax]).nice();

var yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0, yMax]).nice();

var xAxis = d3.axisBottom()
    .scale(xScale);
var yTicks = 5
var yAxis = d3.axisLeft()
    .scale(yScale);
var gX = svg.append('g')
        .attr('transform', 'translate(0,' + height + ')')
        .attr('class', 'x axis')
        .call(xAxis);

// y-axis is translated to (0,0)
var gY= svg.append('g')
        .attr('transform', 'translate(0,0)')
        .attr('class', 'y axis')
        .call(yAxis
        );

var bubble = svg.selectAll('.bubble')
        .data(graphdata)
    .enter().append('path')
        .attr('class', 'bubble')
         .attr("d", d3.symbol().type(d3.symbolCircle))
      .attr("transform", function(d) { return "translate(" + xScale(d["x"]) + "," + yScale(d["y"]) + ")"; })
        .attr('r', 3.5 )
        .attr('fill-opacity', 0.5)
        .style('fill','blue');

bubble.append('title')
    .attr('x', 3.5 )
    .text(key);

current update/add code:

  let new_yScale = yScale;
  let new_xScale = xScale;
  yAxis.scale(new_yScale);
  xAxis.scale(new_xScale);

  svg.transition().duration(750).select('.y.axis').call(yAxis);
  svg.transition().duration(750).select('.x.axis').call(xAxis);

  let scatterSelect = svg.selectAll("bubble").data(graphdata);

  scatterSelect.transition()
        .duration(750)
        .attr("cx", function(d) {
        return new_xScale(d["x"]);
      })
        .attr("cy", function(d) {
        return new_yScale(d["x"]);
      })
        .style("fill", "grey");

  scatterSelect.enter()
    .append("path")
        .attr('class', 'bubble')
         .attr("d", d3.symbol().type(d3.symbolTriangle))
      .attr("transform", function(d) { return "translate(" + 

new_xScale(d["x"]) + "," + new_yScale(d["y"]) + ")"; })
          .attr("r", 3.5)
          .attr('fill-opacity', 0.5)
          .style("fill",'grey');

read the docs about `insert`, first start by making a running example. [red circles are inserted after the blue circles](https://i.imgur.com/UYfcgjw.png), opacity is 1.0 to make visible they are behind — rioV8, Nov 07 '18 at 00:49

Bryan · Answer 1 · 2018-11-01T16:03:50.357

0

The visual stacking order of SVG elements is determined by the order in which they are added to the main SVG element, and that order is determined by your data array. For your new data to be visually behind the old data it needs to be at the start of your data array so that it is added first. To achieve that you could perhaps use unshift or concat

edited Nov 01 '18 at 16:03

answered Nov 01 '18 at 15:48

Bryan

657
3
10

I don't think you understood my logic which could be a mishap on my part. But they are different datasets. And I use a button to trigger the update. – Kabooki Nov 02 '18 at 15:05
@Kabooki Ah, yes, I misunderstood. Did rioV8’s suggestion of using insert instead of append work? – Bryan Nov 03 '18 at 07:20
unfortunately not yet. – Kabooki Nov 06 '18 at 16:25
figured it out .insert("path", ".bubble") – Kabooki Nov 07 '18 at 10:19

score 0 · Answer 2 · answered Nov 07 '18 at 10:23

Fixed it with the insert

scatterSelect.enter()
.insert("path", ".bubble")
    .attr('class', 'bubble')
     .attr("d", d3.symbol().type(d3.symbolTriangle).size(30))
  .attr("transform", function(d) { return "translate(" + new_xScale(d["x"]) + "," + new_yScale(d["y"]) + ")"; })
  .attr("r", 3.5)
  .attr('fill-opacity', 1.0)
  .style("fill",'#9EB5DF');

D3 js update plot just adds new points in the background rather than on top

2 Answers2