javascript - D3js exit() 和更新工作，无法进入()

Question

我有一个 D3 散点图，我正在尝试根据不断变化的数据将圆圈添加到选择中。我将数据选择传递给两个函数:render 和 update。 render 函数是初始渲染，update 具有 enter() 和 exit() 方法。我可以轻松添加初始数据集，并使数据集中不再存在的圆圈退出。我使用 d.id 作为 d3 占位符。

问题:当我尝试 enter() 添加的数据点时，没有任何反应。我检查了新数据选择的长度，它比预先存在的要大。在 DOM 上，较小的数据集仍然存在(已经存在的圆)，但没有新的圆进入，即使数据集已更改。

我已经浏览了很多有关数据连接的教程，并且我认为我已经适本地调用了我的 enter() 和 exit() 方法。给出了什么？

这是我的代码:

            var container = angular.element(document.querySelector('.chart-container'))[0];
            var margin = {
                    top: container.clientHeight / 12, 
                    right: container.clientWidth / 14, 
                    bottom: container.clientHeight / 10, 
                    left: container.clientWidth / 11
                };
            var w = container.clientWidth - margin.left - margin.right;
            var h = container.clientHeight - margin.top - margin.bottom;

            // ******** **************** ******** //  
            // ******** INITIAL RENDER ******** //
            function render(input) {

                console.log(Object.keys(input).length);

                var xScale = d3.scale.linear()
                    .domain([0, d3.max(input, function(d) { return d["ctc"]; })])
                    .range([0, w])
                    .nice();

                var yScale = d3.scale.linear()
                    .domain([0, d3.max(input, function(d) { return d["ttc"]; })])
                    .range([h, 0])
                    .nice();

                var rScale = d3.scale.linear()
                    .domain([0, d3.max(input, function(d) { return d["effective"]; })])
                    .range([2, 15]);

                // *********** //
                // SVG ELEMENT //  
                var svg = d3.select('.chart-container')
                    .append('svg')
                    .attr('class', 'scatter')
                    .attr('viewBox', '0, 0, ' + Math.round(w + margin.left + margin.right) + ', ' + Math.round(h + margin.top + margin.bottom))
                    .attr('preserveAspectRatio', 'xMinYMin')
                    // used to center element and make use of margins
                    .append('g')
                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

                // add circles in group
                var circles = svg.append('g')
                    .attr('class','circles')
                    .attr('clip-path','url(#chart-area)');

                // add individual circles
                var circle = circles.selectAll('circle')
                    .data(input, function(d) {return d.id;})
                    .enter()
                    .append('circle')
                    .attr('class', 'circle')
                    .attr('cx', function(d) { return xScale(d["ctc"]); })
                    .attr('cy', function(d) { return yScale(d["ttc"]); })
                    .attr('r', function(d) { return rScale(d["effective"]); })
                    .attr('fill', function(d, i) { return d["effective"]; })
                    .on('mouseover', function(d) {
                        tooltip.style('visibility', 'visible');
                        return tooltip.text(d["technology"]);
                     })
                    .on("mousemove", function(){ return tooltip.style("top",
                        (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
                    .on("mouseout", function(){return tooltip.style("visibility", "hidden");})


                // append clip path
                svg.append('clipPath')
                    .attr('id','chart-area')
                    .append('rect')
                    .attr('class', 'rect')
                    .attr('x', 0)
                    .attr('y', 0)
                    .attr('width', w)
                    .attr('height', h);

            };

            // ******** **************** ******** //  
            // ******** UPDATE ******** //
            function update(updateObject) {

                var input = updateObject;

                var xScale = d3.scale.linear()
                    .domain([0, d3.max(input, function(d) { return d["ctc"]; })])
                    .range([0, w])
                    .nice();

                var yScale = d3.scale.linear()
                    .domain([0, d3.max(input, function(d) { return d["ttc"]; })])
                    .range([h, 0])
                    .nice();

                var rScale = d3.scale.linear()
                    .domain([0, d3.max(input, function(d) { return d["effective"]; })])
                    .range([2, 15]);

                var svg = d3.select('svg')
                    .data(input)
                    .attr('viewBox', '0, 0, ' + Math.round(w + margin.left + margin.right) + ', ' + Math.round(h + margin.top + margin.bottom))
                    .attr('preserveAspectRatio', 'xMinYMin')
                    .append('g')
                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

                // BIND TO DATA
                var circles = d3.selectAll('circle')
                    .data(input, function(d) { return d.id; });

                // Circles Enter
                circles.enter()
                    .insert('svg:circle')
                    .attr('class', 'circle')
                    .attr('cx', function(d) { return xScale(d["ctc"]); })
                    .attr('cy', function(d) { return yScale(d["ttc"]); })
                    .attr('r', function(d) { return rScale(d["effective"]); });
                    /*
                    .on('mouseover', function(d) {
                        tooltip.style('visibility', 'visible');
                        return tooltip.text(d["technology"]);
                     })

                    .on("mousemove", function(){ return tooltip.style("top",
                        (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
                    .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
                    */

                // UPDATE
                circles.transition()
                    .duration(1000)
                    .attr('cx', function(d) { return xScale(d["ctc"]); })
                    .attr('cy', function(d) { return yScale(d["ttc"]); })
                    .attr('r', function(d) { return rScale(d["effective"]); });


                // EXIT
                circles.exit()
                    .transition()
                    .duration(500)
                    .attr('r', 0)
                    .style('opacity', 0)
                    .style('fill', 'gray')
                    .remove();      

            }

更新这是一个用于测试的代码笔:http://codepen.io/himmel/pen/JdNJMM

Answer 1

代码的问题是，您试图使用对象作为数据。 d3.selection.data() 接受一个数组，而不是一个对象。请参阅the d3 wiki有关 data() 函数的更多信息。

我创建了一个updated你的codepen的版本。我将数据更改为数组并应用了正确的 conventional margin 。此外，我通过删除尺度和 svg 元素的双重初始化来简化代码。