Question

我不明白为什么没有添加新元素。

我已经创建了3个<li>个元素，在我的地图中我还有2个<li>应该添加但没有添加任何内容。

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
        <div>TODO write content</div>
        <ul id="#example">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script>    
            // Lets say our data is of this form
            var multiples = [{'num': 2}, {'num': 4}, {'num': 6}, {'num': 8}, {'num': 10}];

            // Get hold of your container
            var container = d3.select('#example');

            // Get hold of all the existing list items within the container
            var children = container.selectAll('li').data(multiples, function (d) {
                console.log(d);
                return d ? d.num : null;
            });

            console.log(children);

            // Mappings that represent pseudo DOM nodes that can potentially
            // be created for each data unit
            var updateSelection = children.enter() // Mappings that need DOM node creation
                    .append('li') // Create the DOM nodes for those mappings
                    .text(function (d) {
                        return d.num;
                    });

            console.log(updateSelection);

            // mapping representing real DOM nodes that could not be
            // mapped to any item in the data
            var exitSelection = children.exit().remove();
        </script>
    </body>
</html>

Answer 1

问题在于ID不应该是#example：

    <ul id="#example"> //#example this is wrong it should be just example.
        <li></li>
        <li></li>
        <li></li>
    </ul>

应该是：

<ul id="example">
    <li></li>
    <li></li>
    <li></li>
</ul>

工作代码here

选择输入不添加新元素

1 个答案: