misoproject / d3.chart

A framework for creating reusable charts with d3.js.
http://misoproject.com/d3-chart
MIT License
729 stars 87 forks source link

Not deleted when data is updated. #116

Open kdh6429 opened 9 years ago

kdh6429 commented 9 years ago

I'm using d3.chart as my bar chart. When I changed my data through 'push', and seems every function is called well. (only 'update' function is not called, dont know why) but my chart is not deleted, over-draw on it. what am i missing.

this is my part of code

            insert: function() {
                var chart = this.chart();
                console.log("insert");

                return this.append('rect')
                .attr('fill', 'blue')
                .attr('width', chart.xScale.rangeBand());
            },
            events: {
                enter: function() {
                    var chart = this.chart();
                    console.log("enter", data);
                    console.log(chart);
                    return this
                    .attr('x', function(d) { return chart.xScale(d.name); })
                    .attr('y', function(d) { return chart.yScale(d3.max([0, d.value])); })
                    .attr('height', function(d) { return Math.abs(chart.yScale(d.value) - chart.yScale(0)); })
                    .attr('width', chart.xScale.rangeBand())
                    .attr('fill', function(d) {return chart._color(d.name);})
                    .on("mouseover", function(d) { console.log(d); chart._callback_mouseover(d); });
                },
                merge: function () {
                    console.log("merge");
                    var chart = this.chart();

                    console.log(this);
                    return this
                    .attr('x', function(d) { console.log(chart.xScale(d.name)); return chart.xScale(d.name); })
                    .attr('y', function(d) { return chart.yScale(d3.max([0, d.value])); })
                    .attr('width', chart.xScale.rangeBand())
                    .attr('height', function(d) { return Math.abs(chart.yScale(d.value) - chart.yScale(0)); })
                    .attr('fill', function(d) {return chart._color(d.name);})
                    .on("mouseover", function(d) { console.log(d); chart._callback_mouseover(d); });
                }
            }

first draw image

second draw image

and third image

kdh6429 commented 9 years ago

http://jsfiddle.net/vtC75/6/ I tried to change some code to make more reuseable. since that, bar chart is currently displayed NOT well. I think because of scale and range.. any idea of this?