2015-12-21 59 views
0

到目前为止,我导入的唯一库是d3,并且检查了d3.js文件以确保函数在那里。它是。.delay()不是d3中的函数

我正在试图从D3和AngularJS书的数据可视化中做例子。下面的代码[直接从书中,去掉注释】题:

<svg width="800" height="500"></svg> 
<script type="text/javascript"> 
var data = []; 
setInterval(function(){ 
    if (data.length < 8) { 
     data.push(Math.random()); 
    } 
    else { 
     data = []; 
    } 
    draw(); 
}, 1000); 

function draw() { 
    var svg = d3.select('svg'); 

    var circles = svg.selectAll('circle').data(data); 

    circles 
    .attr('fill', 'orange'); 

    circles.enter() 
    .append('circle') 
    .attr('fill', 'red') 
    .attr('r', 40) 
    .attr('cx', function(d, i) { return i*100 + 50; }) 
    .attr('cy', 50); 

    circles 
    .style('stroke', 'black'); 

    circles.exit() 
    .delay() 
    .remove(); 
} 

我特别遇到的问题是在

circles 
.exit() 
.delay() 
.remove(); 

它说,延迟功能“是不是功能“,即使它是。我尝试将书中的代码完全移植到一个全新的项目中,但它不起作用。 (如果这有所帮助,我正在使用chrome浏览器)。

感谢

+0

退出函数返回的东西,你可以调用延迟? –

+0

感谢您的回答!是的,它返回一个数组。当数组长度为8时,该数组成为一个圆对象数组,但在此之前,控制台记录的唯一有意义的信息是数组的长度 – LargeCrimsonFish

+2

@ johnny5不,不。 '.exit()'返回一个d3 [选择](https://github.com/mbostock/d3/wiki/Selections),但'.delay()'是d3 [transitions]的一个函数(https:// github.com/mbostock/d3/wiki/Transitions#delay) – Paulpro

回答

3

delay()不是selections功能。但是,您可以拨打delay()进行转换。所以:

circles 
    .exit() 
    .transition() 
    .delay() 
    .remove(); 
+0

感谢您的回答!不幸的是,它给出了自己的公平份额的错误,但我了解到,延迟只能被称为d3转换,而不是d3选择。 – LargeCrimsonFish

相关问题