{"id":501,"date":"2015-02-10T17:31:36","date_gmt":"2015-02-10T09:31:36","guid":{"rendered":"http:\/\/www.daliane.com\/?p=501"},"modified":"2015-02-11T13:03:13","modified_gmt":"2015-02-11T05:03:13","slug":"d3js_xue_xi_-update_enter_exit_de_shi_yong","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/d3js_xue_xi_-update_enter_exit_de_shi_yong\/","title":{"rendered":"D3js\u5b66\u4e60–update, enter, exit \u7684\u4f7f\u7528"},"content":{"rendered":"

1. update()<\/h1>\n

\u5f53\u5bf9\u5e94\u7684\u5143\u7d20\u6b63\u597d\u6ee1\u8db3\u65f6 \uff08 \u7ed1\u5b9a\u6570\u636e\u6570\u91cf = \u5bf9\u5e94\u5143\u7d20 \uff09<\/strong><\/p>\n

\u5b9e\u9645\u4e0a\u5e76\u4e0d\u5b58\u5728\u8fd9\u6837\u4e00\u4e2a\u51fd\u6570\uff0c\u53ea\u662f\u4e3a\u4e86\u8981\u4e0e\u4e4b\u540e\u7684 enter() \u548c exit() \u4e00\u8d77\u8bf4\u660e\u624d\u8ba4\u4e3a\u6709\u8fd9\u6837\u4e00\u4e2a\u51fd\u6570\u3002\u5f53\u5bf9\u5e94\u5143\u7d20\u6b63\u597d\u6ee1\u8db3\u65f6\uff0c\u540e\u9762\u76f4\u63a5\u8ddf text \uff0cstyle \u7b49\u64cd\u4f5c\u5373\u53ef\u3002<\/p>\n

2. enter()<\/h1>\n

\u5f53\u5bf9\u5e94\u7684\u5143\u7d20\u4e0d\u8db3\u65f6 \uff08 \u7ed1\u5b9a\u6570\u636e\u6570\u91cf > \u5bf9\u5e94\u5143\u7d20 \uff09<\/strong><\/p>\n

\u5f53\u5bf9\u5e94\u7684\u5143\u7d20\u4e0d\u8db3\u65f6\uff0c\u8981\u6dfb\u52a0\u5143\u7d20\uff0c\u4f7f\u4e4b\u4e0e\u7ed1\u5b9a\u6570\u636e\u7684\u6570\u91cf\u76f8\u7b49\u3002\u540e\u9762\u8ddf append \u51fd\u6570\u6dfb\u52a0\u5143\u7d20\u3002<\/p>\n

3. exit()<\/h1>\n

\u5f53\u5bf9\u5e94\u7684\u5143\u7d20\u8fc7\u591a\u65f6\u00a0\uff08 \u7ed1\u5b9a\u6570\u636e\u6570\u91cf < \u5bf9\u5e94\u5143\u7d20 \uff09<\/strong><\/p>\n

\u5f53\u5bf9\u5e94\u7684\u5143\u7d20\u8fc7\u591a\u65f6\uff0c\u901a\u5e38\u8981\u5220\u9664\u5143\u7d20\uff0c\u4f7f\u4e4b\u4e0e\u7ed1\u5b9a\u6570\u636e\u7684\u6570\u91cf\u76f8\u7b49\u3002\u540e\u9762\u8ddf remove \u51fd\u6570\u5220\u9664\u5143\u7d20\u3002<\/p>\n

4. \u4f7f\u7528\u65b9\u6cd5<\/h1>\n
\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n
23<\/div>\n
24<\/div>\n
25<\/div>\n<\/div>\n<\/td>\n
\n
\n
<<\/span>body<\/span>><\/span><\/div>\n
<<\/span>p<\/span>><\/span>AAAAAAAAA<\/span><<\/span>\/<\/span>p<\/span>><\/span><\/div>\n
<<\/span>p<\/span>><\/span>BBBBBBBBB<\/span><<\/span>\/<\/span>p<\/span>><\/span><\/div>\n
<<\/span>p<\/span>><\/span>CCCCCCCCC<\/span><<\/span>\/<\/span>p<\/span>><\/span><\/div>\n
<\/div>\n
<script <\/span>src<\/span>=<\/span>“http:\/\/d3js.org\/d3.v3.min.js”<\/span> charset<\/span>=<\/span>“utf-8”<\/span>><\/span><\/script><\/span>\u00a0\u00a0<\/span><\/div>\n
<script><\/span><\/div>\n
<\/div>\n
var<\/span> dataset<\/span> =<\/span> [<\/span> 10<\/span> ,<\/span> 20<\/span> ,<\/span> 30<\/span> ,<\/span> 40<\/span> ,<\/span> 50<\/span> ]<\/span>;<\/span><\/div>\n
<\/div>\n
var<\/span> update<\/span> =<\/span> d3<\/span>.<\/span>select<\/span>(<\/span>“body”<\/span>)<\/span>.<\/span>selectAll<\/span>(<\/span>“p”<\/span>)<\/span>.<\/span>data<\/span>(<\/span>dataset<\/span>)<\/span>;<\/span><\/div>\n
var<\/span> enter<\/span>\u00a0\u00a0<\/span>=<\/span> update<\/span>;<\/span><\/div>\n
<\/div>\n
update<\/span>.<\/span>text<\/span>(<\/span>function<\/span>(<\/span>d<\/span>,<\/span>i<\/span>)<\/span>{<\/span><\/div>\n
return<\/span> “update “<\/span> +<\/span> d<\/span>;<\/span><\/div>\n
}<\/span>)<\/span>;<\/span><\/div>\n
<\/div>\n
enter<\/span>.<\/span>enter<\/span>(<\/span>)<\/span><\/div>\n
.<\/span>append<\/span>(<\/span>“p”<\/span>)<\/span><\/div>\n
.<\/span>text<\/span>(<\/span>function<\/span>(<\/span>d<\/span>,<\/span>i<\/span>)<\/span>{<\/span><\/div>\n
return<\/span> “enter “<\/span> +<\/span> d<\/span>;<\/span><\/div>\n
}<\/span>)<\/span>;<\/span><\/div>\n
\u00a0\u00a0<\/span><\/div>\n
<\/script><\/span>\u00a0\u00a0<\/span><\/div>\n
<<\/span>\/<\/span>body<\/span>><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u4e0a\u9762\u7684\u4ee3\u7801\u5206\u522b\u7528\u4e86\u53d8\u91cf\u540d update \u548c enter \u6765\u8868\u793a\u5404\u81ea\u7684\u90e8\u5206\uff0c\u8fd0\u884c\u7ed3\u679c\u5982\u56fe\uff1a<\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\"71\"<\/a><\/div>\n

\u56fe\u4e2d\u53ef\u4ee5\u770b\u5230\u65b0\u6dfb\u52a0\u7684\u5143\u7d20 enter \u7684\u90e8\u5206\u3002<\/p>\n

\u63a5\u4e0b\u6765\u4fee\u6539\u90e8\u5206\u4ee3\u7801\uff0c\u770b\u770b\u600e\u4e48\u7528 exit \u3002<\/p>\n

\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n<\/div>\n<\/td>\n
\n
\n
var<\/span> dataset<\/span> =<\/span> [<\/span> 10<\/span> ,<\/span> 20<\/span> ]<\/span>;<\/span><\/div>\n
<\/div>\n
var<\/span> update<\/span> =<\/span> d3<\/span>.<\/span>select<\/span>(<\/span>“body”<\/span>)<\/span>.<\/span>selectAll<\/span>(<\/span>“p”<\/span>)<\/span>.<\/span>data<\/span>(<\/span>dataset<\/span>)<\/span>;<\/span><\/div>\n
var<\/span> exit<\/span>\u00a0\u00a0<\/span>=<\/span> update<\/span>;<\/span><\/div>\n
<\/div>\n
update<\/span>.<\/span>text<\/span>(<\/span>function<\/span>(<\/span>d<\/span>,<\/span>i<\/span>)<\/span>{<\/span><\/div>\n
return<\/span> “update “<\/span> +<\/span> d<\/span>;<\/span><\/div>\n
}<\/span>)<\/span>;<\/span><\/div>\n
<\/div>\n
exit<\/span>.<\/span>exit<\/span>(<\/span>)<\/span><\/div>\n
.<\/span>text<\/span>(<\/span>function<\/span>(<\/span>d<\/span>,<\/span>i<\/span>)<\/span>{<\/span><\/div>\n
return<\/span> “exit”<\/span>;<\/span><\/div>\n
}<\/span>)<\/span>;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u7ed3\u679c\u56fe\u4e3a\uff1a<\/p>\n

\u00a0 \u00a0\u00a0\"72\"<\/a><\/div>\n

\u53ef\u4ee5\u770b\u5230\uff0c\u8c03\u7528 exit() \u51fd\u6570\u540e\uff0c\u5b9e\u9645\u4e0a\u662f\u8fd4\u56de\u6ca1\u6709\u5bf9\u5e94\u6570\u636e\u7684\u5143\u7d20\u3002\u6211\u4eec\u53ef\u4ee5\u5220\u9664\u6389\u591a\u4f59\u7684\u5143\u7d20\uff0c\u5982\u4e0b\uff1a<\/p>\n

\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n<\/div>\n<\/td>\n
\n
\n
exit<\/span>.<\/span>exit<\/span>(<\/span>)<\/span><\/div>\n
.<\/span>remove<\/span>(<\/span>)<\/span>;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

enter \u51fd\u6570\u7684\u4f7f\u7528\u6700\u4e3a\u591a\u89c1\u3002\u56e0\u4e3a\u7528 D3 \u505a\u6570\u636e\u53ef\u89c6\u5316\u65f6\uff0c\u6709\u9700\u8981\u7684\u6570\u636e\uff0c\u4e14\u6570\u636e\u91cf\u5de8\u5927\uff0cDOM \u5374\u4e2d\u5f88\u5c11\u6709\u4e0e\u4e4b\u5bf9\u5e94\u6570\u91cf\u7684\u5143\u7d20\u3002\u6240\u4ee5\u8981\u7279\u522b\u719f\u7ec3 enter \u7684\u4f7f\u7528\u65b9\u6cd5<\/p>\n","protected":false},"excerpt":{"rendered":"

1. update() \u5f53\u5bf9\u5e94\u7684\u5143\u7d20\u6b63\u597d\u6ee1\u8db3\u65f6 \uff08 \u7ed1\u5b9a\u6570\u636e\u6570\u91cf = \u5bf9\u5e94\u5143\u7d20 \uff09 \u5b9e\u9645\u4e0a\u5e76\u4e0d\u5b58\u5728\u8fd9\u6837\u4e00\u4e2a\u51fd\u6570…<\/p>\n","protected":false},"author":2,"featured_media":228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[38,56,8],"tags":[55,233],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/501"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=501"}],"version-history":[{"count":1,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"predecessor-version":[{"id":504,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/501\/revisions\/504"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}