如何在 D3JS 中创建更新函数

Question

我正在尝试构建一个条形图，我可以根据特定的时间长度在显示的数据量之间切换。到目前为止，我的代码是这样的，

var margin = {
    top : 20,
    right : 20,
    bottom : 30,
    left : 50
}, width = 960 - margin.left - margin.right, height = 500
        - margin.top - margin.bottom;


var barGraph = function(json_data, type) {

if (type === 'month')
    var barData = monthToArray(json_data);
else 
    var barData = dateToArray(json_data);


    var y = d3.scale.linear().domain([ 0, Math.round(Math.max.apply(null,
            Object.keys(barData).map(function(e) {
                return barData[e]['Count']}))/100)*100 + 100]).range(
            [ height, 0 ]);

    var x = d3.scale.ordinal().rangeRoundBands([ 0, width ], .1)
            .domain(d3.entries(barData).map(function(d) {
                return barData[d.key].Date;
            }));

    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).orient("left");

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

    svg.append("g").attr("class", "x axis").attr("transform",
            "translate(0," + height + ")").call(xAxis);

    svg.append("g").attr("class", "y axis").call(yAxis).append(
            "text").attr("transform", "rotate(-90)").attr("y", 6)
            .attr("dy", ".71em").style("text-anchor", "end").text(
                    "Total Hits");

    svg.selectAll(".barComplete").data(d3.entries(barData)).enter()
            .append("rect").attr("class", "barComplete").attr("x",
                    function(d) {
                        return x(barData[d.key].Date)
                    }).attr("width", x.rangeBand() / 2).attr("y",
                    function(d) {
                        return y(barData[d.key].Count);
                    }).attr("height", function(d) {
                return height - y(barData[d.key].Count);
            }).style("fill", "orange");

    var bar = svg.selectAll(".barHits").data(d3.entries(barData))
            .enter().append("rect").attr("class", "barHits").attr(
                    "x", function(d) {
                        return x(barData[d.key].Date) + x.rangeBand() / 2
                    }).attr("width", x.rangeBand() / 2).attr("y",
                    function(d) {
                        return y(barData[d.key].Count);
                    }).attr("height", function(d) {
                return height - y(barData[d.key].Count);
            }).style("fill", "red");
};

这很好地显示了我的原始数据集，我设置了一个按钮来在页面开头绘制的所有数据集之间切换。所有的数组都存在，但无论我多么努力，我都会继续向 div 添加一个新图，所以在单击按钮后我有两个图，我尝试使用 enter() 替换 div 中的所有代码 exit( ) remove() 函数，但是在使用这些函数时，我收到一条错误消息，指出没有 exit() 函数，我是通过关注其他人发布的 here 和另一个 here 的帖子得到的，但无济于事。有什么想法吗？

Answer 1

您最有可能做的是在每次单击按钮时使用新的div 绘制一个新图形，您可以尝试做的一件事是在某处按住图表容器元素，并且当按钮单击后，您只需清除它的子项并重新绘制图形。

Answer 2

实际上，我几乎从不链接.data() 和.enter()。

// This is the syntax I prefer:
var join  = svg.selectAll('rect').data(data)
var enter = join.enter()

/* For reference: */

// Selects all rects currently on the page
// @returns: selection
svg.selectAll('rect') 

// Same as above but overwrites data of existing elements
// @returns: update selection
svg.selectAll('rect').data(data) 

// Same as above, but now you can add rectangles not on the page
// @returns: enter selection
svg.selectAll('rect').data(data).enter()

同样重要：

#selection.enter()

当您追加或插入时，输入选择合并到更新选择中。

Answer 3

好的，我想通了，所以我首先将大家的注意力转移到here 我找到答案的地方。关键在于我绘制 svg 元素的方式，而不是用新图形替换它，我只是不断地绘制一个新图形并将其附加到#chart div。我找到了我指导你们的答案，并在我现有的 barGraph 函数的开头添加了这一行。

d3.select("#barChart").select("svg").remove();

它就像一个魅力，像我想象的那样来回切换图表，现在我有更多关于条形图本身的任务，我可以继续另一个项目。

感谢大家的帮助，也许有一天我可以报答你！