更新折线图(Updating line graph)

 我正在寻找更新我的折线图的最佳方法。 传入的数据不是“新的”，它只是在许多不同的数据集之间切换。 我的问题是.append（'path'）根本不起作用，我不知道为什么。 它可能与我的分组有关：我喜欢在图表周围加上边距，因此轴和标签不会被剪裁。 为此，我的HTML看起来如下...... 
 
<svg w, h id='svg-container'>
  <g translate(w - margin, h - margin) id='chart-container'>
    <g id='x-axis'>
    <g id='y-axis'>
 
 在我的代码中，我想选择chart-container并附加<path d='...' id='line'> 。 稍后，在更新图表时，我希望能够简单地select('chart-container').select('path')并更新该选择。 
 
 图表的初始设置： 
 
var svgContainer = d3.select(element[0]).append('svg')
    .attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    })
    .classed('svg-container', true);

var chartContainer = svgContainer.append('g')
  .classed('chart-container', true)
  .attr('transform', "translate(" + margin.left + "," + margin.top + ")");

chartContainer.append('path')
 .data(activeData)
 .attr('d', lineFunc)
 .attr('stroke', 'blue')
 .attr('stroke-width', 
 .attr('fill', 'none');
 
 稍后更新图表： 
 
svgContainer = d3.select('#line-container').select('.svg-container')
    .attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    });

chartContainer = svgContainer.select('.chart-container')
    .attr('transform', "translate(" + margin.left + "," + margin.top + ")");

chartContainer.select('path')
     .data(activeData)
     .attr('d', lineFunc)
     .attr('stroke', 'blue')
     .attr('stroke-width', 
     .attr('fill', 'none');
 
 不幸的是，这不起作用，我不知道为什么。 最初的chartContainer.append('path')似乎正在工作（有时），而chartContainer.select('path')实际上并没有返回正确的项目（othertimes）。 可能d3要遍历我的轴组并返回其中一条路径？ 我是以错误的方式来做这件事的吗？ 

I'm looking for the best way to update my line graph. The incoming data is not 'new', it's just switching between many different data sets. My issue is that .append('path') simply isn't working, and I'm not sure why. It may have to do with my grouping: I like to put margins around my graphs so axis and labels aren't clipped. To do this, my HTML looks like the following... 
 
<svg w, h id='svg-container'>
  <g translate(w - margin, h - margin) id='chart-container'>
    <g id='x-axis'>
    <g id='y-axis'>
 
In my code I would like to select chart-container and append a <path d='...' id='line'>. Later, when updating the graph, I would hope to be able to simply select('chart-container').select('path') and update that selection.
 
Initial setup of the chart:
 
var svgContainer = d3.select(element[0]).append('svg')
    .attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    })
    .classed('svg-container', true);

var chartContainer = svgContainer.append('g')
  .classed('chart-container', true)
  .attr('transform', "translate(" + margin.left + "," + margin.top + ")");

chartContainer.append('path')
 .data(activeData)
 .attr('d', lineFunc)
 .attr('stroke', 'blue')
 .attr('stroke-width', 
 .attr('fill', 'none');
 
Update the chart later on:
 
svgContainer = d3.select('#line-container').select('.svg-container')
    .attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    });

chartContainer = svgContainer.select('.chart-container')
    .attr('transform', "translate(" + margin.left + "," + margin.top + ")");

chartContainer.select('path')
     .data(activeData)
     .attr('d', lineFunc)
     .attr('stroke', 'blue')
     .attr('stroke-width', 
     .attr('fill', 'none');
 
Unfortunately this doesn't work, and I'm not sure why. The initial chartContainer.append('path') seem to be working (sometimes), and the chartContainer.select('path') doesn't actually return the correct item (othertimes). Might d3 be traversing my axis groups and returning one of their paths? Am I going about this the wrong way? 

原文：https://stackoverflow.com/questions/18992415