Javascript 使用D3更新多折线图的模式

我在D3中创建了一个小仪表板，其中：当一个圆环图的一个部分被点击时，一个相邻的折线图将被更新。代码松散地基于此块

以下是我现在所掌握的知识和问题的一部分：

如果您滚动到小提琴的末尾，您会发现“更新”代码如下：

function updateLineChart(group, colorChosen) {


var basics = dsLineChartBasics();

var margin = basics.margin,
    width = basics.width,
    height = basics.height;

var currentDatasetLineChart = datasetLineChartChosen(group);

var dataNest1 = d3.nest()
    .key(function(d) {return d.group2;})
    .entries(currentDatasetLineChart); 

console.log(dataNest1);

console.log(currentDatasetLineChart);

var xScale = d3.scale.linear()
    .range([0, width])
    .domain(d3.extent(currentDatasetLineChart, function(d) { return d.category; }));

var yScale = d3.scale.linear()
    .range([height, 0])
    .domain([0, d3.max(currentDatasetLineChart, function(d) { return d.measure; })]);       

var line = d3.svg.line()
     .interpolate("basis")  
    .x(function(d, i) { return xScale(d.category); })
    .y(function(d) { return yScale(d.measure); });

var svg = d3.select("#lineChart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);   

var plot = svg.selectAll("plot")
  .data(dataNest1)
 .enter()
  .append("g")
.append("path")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", colorChosen);

//plot.exit().remove(); 


}

---

您会注意到，当单击饼图切片时，它将在现有的饼图下创建新的折线图，而不是更新现有的折线图。我已经阅读了常规更新模式教程，但仍然没有取得什么成功。任何帮助都将不胜感激。

首先，您在更新功能中做的工作太多了。如果增加了一些变量的范围，则不需要在每次更新时重新创建它们

svg

、

xScale

、

yScale

、

margins

和

line

都是您最初绘制和更新时可以共享的内容

其次，虽然更新模式很重要，但在这种情况下，您并不是在用新数据更新绘图，而是在用所有新数据创建一个全新的绘图。考虑到这一点，我只需转储SVG的内容并重新添加您的行

折线图功能：

// increase the scope of these
var margin, line, svg, xScale, yScale;

function lineChart() {

  var basics = dsLineChartBasics();

  // declared above
  margin = basics.margin,
    ...
  // declared above
  xScale = d3.scale.linear()
    ...
}

function updateLineChart(group, colorChosen) {

  var currentDatasetLineChart = datasetLineChartChosen(group);

  ...

  // adjust xScale based on new data
  xScale.domain(d3.extent(currentDatasetLineChart, function(d) {
      return d.category;
    }));

  // adjust yScale based on new data
  yScale.domain([0, d3.max(currentDatasetLineChart, function(d) {
      return d.measure;
    })]);

  // remove contents of svg
  svg.selectAll("*").remove();

  // replot
  var plot = svg.selectAll("g") //<-- don't use "plot" here it has no meaning
    .data(dataNest1)
  ...

}

更新图表功能：

// increase the scope of these
var margin, line, svg, xScale, yScale;

function lineChart() {

  var basics = dsLineChartBasics();

  // declared above
  margin = basics.margin,
    ...
  // declared above
  xScale = d3.scale.linear()
    ...
}

function updateLineChart(group, colorChosen) {

  var currentDatasetLineChart = datasetLineChartChosen(group);

  ...

  // adjust xScale based on new data
  xScale.domain(d3.extent(currentDatasetLineChart, function(d) {
      return d.category;
    }));

  // adjust yScale based on new data
  yScale.domain([0, d3.max(currentDatasetLineChart, function(d) {
      return d.measure;
    })]);

  // remove contents of svg
  svg.selectAll("*").remove();

  // replot
  var plot = svg.selectAll("g") //<-- don't use "plot" here it has no meaning
    .data(dataNest1)
  ...

}

function updateLineChart（组，颜色选择）{
var currentDatasetLineChart=DataSetLineChartSelected（组）；
...
//根据新数据调整xScale
域（d3.extent）（currentDatasetLineChart，函数（d）{
返回d类；
}));
//根据新数据调整yScale
yScale.domain（[0，d3.max（currentDatasetLineChart，函数（d））{
返回d.measure；
})]);
//删除svg的内容
svg.selectAll（“*”）.remove（）；
//雷普特
var plot=svg.selectAll（“g”）//正是我所需要的建议，谢谢你的额外建议！