javascript - d3.js - 多折线图不更新圆圈

Question

我正在制作 d3 图表(多折线图)。
我试图表示股票预测，因此图表基本上包含两行:股票值(value)线和另一条用于我的预测的线。

预测是每月的，图表中显示了该月的所有日期。
为了选择月份，我添加了一个下拉菜单。

我在每个每日数据上都添加了一个圆圈，第一次效果很好。当用户尝试更改月份时，旧圈子不会更新，但会添加新圈子。

遵循有关圆圈的代码:

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");

我做了一个fiddle更好地了解情况并显示代码。

我在这里缺少什么？为什么圆圈不随着线条自行更新？

Answer 1

要解决圈子不更新的问题，您可以执行以下操作:

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);
}

使用这些辅助函数来减少代码重复:

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");
}

我认为您的代码中存在一些其他问题，当您两次选择同一月份时会出现错误，我们可以通过执行以下操作来解决该问题:

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;
  }
}

工作中的jsfiddle:

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