How do I create the update function in D3JS

Question

I am trying to build a bar graph that I can switch between the amount of data displayed based on a particular length of time. So far the code that I have is this,

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");
};

This does a great job displaying my original data set, I have a button set up to switch between the data sets which are all drawn at the beginning of the page. all of the arrays exist but no matter how hard I try I keep appending a new graph to the div so after the button click I have two graphs, I have tried replacing all of the code in the div, using the enter() exit() remove() functions but when using these I get an error stating that there is no exit() function I got this by following a post that someone else had posted here and another one here but to no avail. Any ideas guys?

Answer 1

您最可能要做的是每次单击按钮时绘制一个带有新div的新图形，您可以尝试做的一件事情是将Charts容器元素保留在某处，单击按钮时，您只需清除是孩子，然后重新绘制图表。

Answer 2

In practice, I almost never chain .data() and .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()

Also important:

# selection.enter()

The enter selection merges into the update selection when you append or insert.

Answer 3

Okay, I figured it out So I will first direct all of your attention to here Where I found my answer. The key was in the way I was drawing the svg element, instead of replacing it with the new graph I was just continually drawing a new one and appending it to the #chart div. I found the answer that I directed you guys to and added this line in the beginning of my existing barGraph function.

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

and it works like a charm, switches the graphs back and forth just as I imagined it would, now I have a few more tasks for the bargraph itself and I can move on to another project.

Thank you all for all of your help and maybe I can return the favor one day!