简体   繁体   中英

what is the d3 default key function?

Trying to figure out what the default key function is in d3.

If the three <p> elements I include in my html body have keys of 0,1,2, and I am using the d3 enter() function to append <p> elements with keys of 0,1,5 why does my d3 code add all <p> elements to my page and not just the <p> with key of 5?

<html>
    <head>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>

        <body>

            <p>joe</p>
            <p>joe</p>
            <p>joe</p>

            <script type="text/javascript">

                d3.select("body").selectAll("p")
                    .data([ 0, 1, 5], function(d){ return d; })
                    .enter()
                    .append("p")
                    .text(function(d){ return d; });

            </script>

        </body>
</html>

jsfiddle: http://jsfiddle.net/266z3dr1/

From the documentation:

If a key function is not specified, then the first datum in the specified array is assigned to the first element in the current selection, the second datum to the second selected element, and so on.

You are getting three new elements because none of the existing ones has a key. Data association is either index-based (default) or key-based (if a key function is passed).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM