d3.js-多个折线图不会更新圆

Question

I'm working on a d3 chart (Multiple line chart).
I'm trying to represent a stock prediction, so basically the chart contains two lines: stock values line and an other one for my prediction.

The prediction is monthly, all days of month are represented in the chart.
In order to choose the month I have added a dropdown menu.

I appended a circle on each daily data, and works well for the first time. When user tries to change the month, the old circles are not updated, but the new ones are added.

Follow the code about circles:

topicEnter.append("g").selectAll("circle")
    .data(function(d){return d.values})
    .enter()
    .append("circle")
    .attr("r", 5)
    .attr("cx", function(dd){return x(dd.date)})
    .attr("cy", function(dd){return y(dd.probability)})
    .attr("fill", "none")
    .attr("stroke", "black");

I have done a fiddle to understand better the situation and in order to show code.

What am I missing here? Why don't the circles update themself with the lines?

Answer 1

The problem is your update cycle, but there are a good number of examples of the enter, update, exit process in d3.

But essentially:

1. You append a new g element for each batch of circles, which means you have an empty selection (no circles are in that g yet) each time and each data point is appended (and none are removed). You don't need this extra append. Take a look at the DOM structure on each append in your existing code.

2. Your enter() selection returns new elements - not modified elements. So if your total number of elements remains the same you will have an empty enter() selection. You'll want to update existing elements separately (alternatively, remove them all and append them all every time).

You'll want something closer to this :

// set the data
   circles =  topic.selectAll("circle")
      .data(function(d){return d.values});
// update existing circles      
   circles.attr("cx", function(dd){return x(dd.date)})
      .attr("cy", function(dd){return y(dd.probability)});
// add new circles     
   circles.enter()
      .append("circle")
      .attr("r", 5)
      .attr("cx", function(dd){return x(dd.date)})
      .attr("cy", function(dd){return y(dd.probability)})
      .attr("fill", "none")
      .attr("stroke", "black");
   // remove excess circles   
   circles.exit().remove();

You'll likely also want to revise the lines that append the lines to reflect the enter, update, exit cycle in d3.

Answer 2

To solve the issue about circles not updating you can do the following:

function update(topics) {
    // Calculate min and max values with arrow functions
  const minValue = d3.min(topics, t => d3.min(t.values, v => v.probability));
  const maxValue = d3.max(topics, t => d3.max(t.values, v => v.probability));
  y.domain([minValue, maxValue]);
  x2.domain(x.domain());
  y2.domain(y.domain());
  // update axes
  d3.transition(svg).select('.y.axis').call(yAxis);
  d3.transition(svg).select('.x.axis').call(xAxis);
  // Update context
  var contextUpdate = context.selectAll(".topic").data(topics);
  contextUpdate.exit().remove();
  contextUpdate.select('path')
  .transition().duration(600)
  .call(drawCtxPath);
  contextUpdate.enter().append('g') // append new topics
    .attr('class', 'topic')
    .append('path').call(drawCtxPath);
  // New data join
  var focusUpdate = focus.selectAll('.topic').data(topics);
  // Remove extra topics not found in data
  focusUpdate.exit().remove(); //remove topics
  // Update paths
  focusUpdate.select('path')
  .transition().duration(600)
  .call(drawPath)
  // Update circles
  var circlesUpdate = focusUpdate
    .selectAll('.topic-circle')
    .data(d => d.values);
  circlesUpdate.exit().remove();
  circlesUpdate.transition().duration(600).call(drawCircle);
  circlesUpdate.enter().append('circle').call(drawCircle);
  // Add new topics
  var newTopics = focusUpdate.enter().append('g') // append new topics
    .attr('class', 'topic');
  // Add new paths
  newTopics.append('path').call(drawPath)
  // Add new circles
  newTopics.selectAll('.topic-circle')
    .data(d => d.values)
    .enter()
    .append('circle')
    .call(drawCircle);
}

With these helper functions to reduce code duplication:

function drawCtxPath(path) {
    path.attr("d", d => line2(d.values))
    .style("stroke", d => color(d.name));
}
function drawPath(path) {
    path.attr("d", d => line(d.values))
    .attr('clip-path', 'url(#clip)')
    .style("stroke", d => color(d.name));
}
function drawCircle(circle) {
    circle.attr('class', 'topic-circle')
    .attr('clip-path', 'url(#clip)')
    .attr("r", d => 5)
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.probability))
    .attr("fill", "none")
    .attr("stroke", "black");
}

I think there are some additional issues in your code, when you select the same month twice you get an error, we can fix that by doing the following:

d3.select('#month_chart').on("change", function() {
  // Get selected value of the select
  var month = this.options[this.selectedIndex].value;
  // Since you have hardcoded data we need to return a new array
  // This is why if you select the same month twice your code breaks
  // since parseDate will fail since the data will be already parsed
  // the second time
  var monthData = get_monthly_data(month).map(d => {
    return {
      date: parseDate(d.date),
      predicted_bool: d.predicted_bool,
      target: d.target
    };
  });
  // Lets use arrow functions!
  var keys = d3.keys(monthData[0]).filter(k => k !== 'date');
  color.domain(keys);
  // More arrow functions!
  var topics = keys.map(key => {
    return {
      name: key,
      values: monthData.map(d => {
        return {
          date: d.date,
          probability: +d[key]
        };
      })
    };
  });
  x.domain(d3.extent(monthData, d => d.date));
  update(topics);
});

// A good ol' switch 
function get_monthly_data(month) {
  switch (month) {
    case 'gennaio':
      return data_1;
    case 'febbraio':
      return data_2;
    case 'marzo':
      return data_3;
    default:
      return data_1;
  }
}

Working jsfiddle:

https://jsfiddle.net/g699scgt/37/