Question

我正在寻找更新线图的最佳方法。传入的数据不是“新的”，它只是在许多不同的数据集之间切换。我的问题是.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')实际上并没有返回正确的项目（其他）。可能d3要遍历我的轴组并返回其中一条路径？我是以错误的方式来做这件事的吗？

Answer 1

您没有向我们展示您的完整代码，但是根据您的描述，听起来好像您可能选择了错误的路径。解决此问题的一种方法是为您想要的路径指定一个特殊类，并相应地进行选择。

chartContainer.append("path")
    .attr("class", "chart");

chartContainer.select("path.chart");

另一个问题是你不能真正使用.data()来更新绑定到DOM元素的数据，就像你正在使用它一样。请改用.datum()。

chartContainer.select('path')
    .datum(activeData);

更新折线图

1 个答案: