d3具有输入更新退出逻辑的折线图

问题描述：

今天我创建了一个简单的条形图与enter-update-exit逻辑 - 一切工作正常。现在我将使用折线图 - 图表的整个数据集可以随时更改，因此我将平滑更新图表。我找不到一个好的例子与折线图和enter-update-exit逻辑（或我看错了）。目前，我必须记住，如果图表被第一次调用或数据更新（数据已更改） - 这是我的脏版本：

today I created a simple Bar Chart with the enter-update-exit logic - everything works fine. Now I will do the same with a line chart - the whole dataset for the chart can change at any time, so I will update the chart smoothly. I can't find a good example with a line chart and the enter-update-exit logic (or I'm looking wrong). Currently I have to remember that if the chart is called for the first time or the data to be updated (data has changed) - This is my dirty version:

   var channelGroup = d3.select(".ch1");

// init. Line Chart 
    if (firstLoad) {
    channelGroup
        .append('path')
        .attr("class", "line")
        .style("stroke", channel.Color)
        .transition()
        .ease("linear")
        .duration(animChart / 2)
        .attr('d', line(channel.DataRows));
}
// update Line Chart    
else {
    channelGroup
        .selectAll("path")
        .data([channel.DataRows])
        .transition()
        .ease("linear")
        .duration(animChart / 2)
        .attr("d", function (d) { return line(d); });
}

我怎么能以一种很好的方式实现这一点？ / p>

how can I realize this in a good manner?... thx!

答

您正在混合两种不同的方法，一种是将数据绑定到行，另一种是将数据传递到行函数。任何一个都可以工作（只要你只有一行），但如果你想摆脱你的if / else结构，你仍然需要分离语句处理从语句更新中添加元素

You're mixing up two different approaches, one binding data to the line and the other just passing the data to the line function. Either one could work (so long as you only have the one line), but if you want to get rid of your if/else construct you're still going to need to separate the statements handling entering/appending the element from the statements updating it.

选项1 （不绑定数据，只需调用函数）：

Option 1 (don't bind data, just call the function):

var linegraph = channelGroup.select('path');

if ( linegraph.empty() ) {
     //handle the entering data
     linegraph = channelGroup.append('path')
                      .attr("class", "line")
                      .style("stroke", channel.Color);
}

linegraph
        .transition()
        .ease("linear")
        .duration(animChart / 2)
        .attr('d', line(channel.DataRows));

选项2 （使用数据加入）：

var linegraph = channelGroup.selectAll("path")
        .data([channel.DataRows]);

linegraph.enter().append('path')
                 .attr("class", "line");

linegraph
        .transition()
        .ease("linear")
        .duration(animChart / 2)
        .attr("d", line); //This is slightly more efficient than
                          //function (d) { return line(d); }
                          //and does the exact same thing.
                          //d3 sees that `line` is a function, and 
                          //therefore calls it with the data as the 
                          //first parameter.

d3具有输入更新退出逻辑的折线图

相关推荐