1

我正在寻找更新折线图的最佳方法。传入的数据不是“新的”，它只是在许多不同的数据集之间切换。我的问题是 .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 可能会遍历我的轴组并返回其中一条路径吗？我会以错误的方式解决这个问题吗？

4

1 回答 1

1

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

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

chartContainer.select("path.chart");

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

chartContainer.select('path')
    .datum(activeData);
于 2013-09-24T21:47:40.190 回答